Material-ui: [ListItem] rightIconButton: bug de estilo com o componente IconMenu personalizado
Olá,
Em primeiro lugar, obrigado pelo seu excelente trabalho nesta biblioteca;)
Tenho vários bugs de posição ao usar componentes personalizados. Aqui está um exemplo com um IconMenu personalizado usado em um ListItem.rightIconButton:
// With my custom component
<ListItem>
[...]
rightIconButton={<CustomComponentListMenu />}
/>
// CustomComponentListMenu.jsx
[...]
render() {
return (
<IconMenu iconButtonElement={this.iconButtonElement} >
<MenuItem onClick={this.onDelete}>Delete</MenuItem>
</IconMenu>
);
}
O IconMenu funciona bem, mas a posição do menu de ícones não é boa (veja a imagem em anexo).
Na verdade, acho que o problema é que o estilo (posição: absoluto, à direita: 4, superior: 12) é aplicado à minha tag de componente personalizado (<CustomComponentListMenu>) e NÃO à tag IconMenu (<IconMenu>).
Consulte ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622) onde _rightIconButtonElement_ é meu elemento personalizado e não o iconMenu.
Eu entendo que não é realmente um bug, mas é uma limitação séria ao usar o componente personalizado (esse é o ponto principal do React, não é?).
Observe que esse "bug" também aparece com outros componentes, como Avatar em ListItem.leftAvatar.
Captura de tela:
Você acha que podemos encontrar uma solução para permitir componentes personalizados?
Versões
Material-UI: 0.15.0
Reagir: 14,7
Navegador: Chrome, Firefox
Colmea
Todos 4 comentários
Acabei de experimentar esse mesmo comportamento estranho. Depois de se aprofundar nele, parece que o rightIconButton prop deseja um elemento, não um componente. Tente mudar rightIconButton={<CustomComponentListMenu />} para rightIconButton={(new CustomComponentListMenu).render()} . Para componentes funcionais sem estado, tente <Component /> -> Component() .
(Observe que React.createElement(Component) não funciona; não verifiquei os detalhes do porquê)
Acabei de começar a usar o React e não sei se isso é intencional ou não, mas uma mensagem de erro quando rightIconButton é definido como um componente em vez de um elemento pode estar em ordem, em vez de falhar desta forma perplexa .
jlroettger
em 19 mai. 2016
Você está repassando ...props ? Eu tive o mesmo problema com o Avatar. Acho que o MUI define alguns adereços internamente.
Meu componente Avatar personalizado tem a seguinte aparência:
...
const Avatar = (props) => {
const propsWithoutMember = { ...props };
delete propsWithoutMember.member;
return (
<MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
);
};
...
Tive que remover meus proptypes personalizados antes de passá-los, caso contrário, o MUI reclamaria sobre props desconhecidos.
jonespen
em 27 set. 2016
Sim, este foi um erro de apenas começar com React, só precisava passar ...props
jlroettger
em 29 set. 2016
Estamos portando o componente no branch v1-beta . Nós o reimplementamos do zero. Embora não tenhamos testado, acho que o problema provavelmente foi corrigido nesse branch. Portanto, estou fechando.
Ainda assim, aceitaremos correções de PR até que a v1-beta assuma o ramo mestre.
oliviertassinari
em 28 jul. 2017
Questões relacionadas
chris-hinds
·
3Comentários
ghost
·
3Comentários
rbozan
·
3Comentários
finaiized
·
3Comentários
TimoRuetten
·
3Comentários
Comentários muito úteis
Acabei de experimentar esse mesmo comportamento estranho. Depois de se aprofundar nele, parece que o
rightIconButtonprop deseja um elemento, não um componente. Tente mudarrightIconButton={<CustomComponentListMenu />}pararightIconButton={(new CustomComponentListMenu).render()}. Para componentes funcionais sem estado, tente<Component />->Component().(Observe que
React.createElement(Component)não funciona; não verifiquei os detalhes do porquê)Acabei de começar a usar o React e não sei se isso é intencional ou não, mas uma mensagem de erro quando
rightIconButtoné definido como um componente em vez de um elemento pode estar em ordem, em vez de falhar desta forma perplexa .