Material-ui: [ListItem] rightIconButton : 사용자 정의 IconMenu 구성 요소의 스타일 버그

에 만든 2016년 04월 13일 · 4코멘트 · 출처: mui-org/material-ui

안녕하세요,

우선,이 라이브러리에 대한 멋진 작업에 감사드립니다;)

사용자 지정 구성 요소를 사용할 때 몇 가지 위치 버그가 있습니다. 다음은 ListItem.rightIconButton에서 사용되는 사용자 지정 IconMenu의 예입니다.

// With my custom component
<ListItem>
    [...]
    rightIconButton={<CustomComponentListMenu />}
/>

// CustomComponentListMenu.jsx
[...]
render() {
        return (
            <IconMenu iconButtonElement={this.iconButtonElement} >
                <MenuItem onClick={this.onDelete}>Delete</MenuItem>
            </IconMenu>
        );
    }

IconMenu는 잘 작동하지만 아이콘 메뉴의 위치가 좋지 않습니다 (첨부 된 스크린 샷 참조).

실제로 문제는 스타일 (position : absolute, right : 4, top : 12)이 IconMenu 태그 (<IconMenu>)가 아닌 사용자 컴포넌트 태그 (<CustomComponentListMenu>)에 적용된다는 것입니다.
ListItem.js : 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622)를 참조하십시오. 여기서 _rightIconButtonElement_는 iconMenu가 아니라 사용자 지정 요소입니다.

나는 그것이 실제로 버그가 아니라는 것을 이해하지만 사용자 정의 구성 요소를 사용할 때 심각한 제한 사항입니다 (React의 전체 요점, 그렇지 않습니까?).

이 "버그"는 ListItem.leftAvatar의 Avatar와 같은 다른 구성 요소에도 나타납니다.

스크린 샷 :
screen-bug-mui-listitem

맞춤형 컴포넌트를 허용하는 솔루션을 찾을 수 있다고 생각하십니까?

버전

Material-UI : 0.15.0
반응 : 14.7
브라우저 : Chrome, Firefox

bug 🐛 List

출처

Colmea

👍2

가장 유용한 댓글

나는 방금 이와 같은 이상한 행동을 경험했습니다. 그것을 파헤친 후에 rightIconButton prop은 컴포넌트가 아닌 요소를 원하는 것 같습니다. rightIconButton={<CustomComponentListMenu />} 을 rightIconButton={(new CustomComponentListMenu).render()} 변경해보세요. 상태 비 저장 기능 구성 요소의 경우 <Component /> -> Component() 시도하십시오.

( React.createElement(Component) 는 작동하지 않습니다. 이유에 대해서는 자세히 살펴 보지 않았습니다.)

방금 React를 사용하기 시작했는데 이것이 의도적 인 것인지 아닌지 모르겠지만 rightIconButton 가 요소 대신 구성 요소로 설정 될 때 오류 메시지가이 난해한 방식으로 실패하는 대신 순서가있을 수 있습니다. .

jlroettger 에 2016년 05월 19일

👍7

모든 4 댓글

( React.createElement(Component) 는 작동하지 않습니다. 이유에 대해서는 자세히 살펴 보지 않았습니다.)

jlroettger 에 2016년 05월 19일

👍7

...props 를 전달하고 계십니까? 아바타도 같은 문제가있었습니다. MUI가 내부적으로 소품을 설정한다고 생각합니다.

내 사용자 정의 아바타 구성 요소는 다음과 같습니다.

...
const Avatar = (props) => {
  const propsWithoutMember = { ...props };
  delete propsWithoutMember.member;
  return (
    <MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
  );
};
...

나는 그것을 전달하기 전에 내 커스텀 proptypes를 제거해야만했다. 그렇지 않으면 MUI가 알려지지 않은 props에 대해 불평 할 것이다.

jonespen 에 2016년 09월 27일

👍2

예 이것은 React로 막 시작한 실수 ...props 만 통과하면됩니다.

jlroettger 에 2016년 09월 29일

👍1

v1-beta 브랜치 에 구성 요소를 이식했습니다. 처음부터 다시 구현했습니다. 테스트하지는 않았지만 문제가 해당 분기에서 해결되었을 가능성이 큽니다. 따라서 나는 그것을 닫습니다.
하지만 v1-beta가 마스터 브랜치를 인수 할 때까지 PR 수정 사항을 수락합니다.

oliviertassinari 에 2017년 07월 28일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Material-ui: [ListItem] rightIconButton : 사용자 정의 IconMenu 구성 요소의 스타일 버그

버전

가장 유용한 댓글

모든 4 댓글

관련 문제