Material-ui: [ListItem] rightIconButton: error de estilo con el componente IconMenu personalizado

Creado en 13 abr. 2016 · 4Comentarios · Fuente: mui-org/material-ui

Hola,

En primer lugar, gracias por su increíble trabajo en esta biblioteca;)

Tengo varios errores de posición cuando uso componentes personalizados Aquí hay un ejemplo con un IconMenu personalizado usado en un ListItem.rightIconButton:

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

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

IconMenu funciona bien, pero la posición del menú de iconos no es buena (ver captura de pantalla adjunta).

En realidad, creo que el problema es que el estilo (posición: absoluta, derecha: 4, superior: 12) se aplica a mi etiqueta de componente personalizado (<CustomComponentListMenu>) y NO a la etiqueta IconMenu (<IconMenu>).
Consulte ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622) donde _rightIconButtonElement_ es mi elemento personalizado y no el iconMenu.

Entiendo que no es realmente un error, pero es una limitación seria cuando se usa un componente personalizado (ese es el objetivo de React, ¿no?).

Tenga en cuenta que este "error" también aparece con otros componentes, como Avatar en ListItem.leftAvatar.

Captura de pantalla:
screen-bug-mui-listitem

¿Cree que podemos encontrar una solución para permitir componentes personalizados?

Versiones

Material-UI: 0.15.0
Reaccionar: 14.7
Navegador: Chrome, Firefox

bug 🐛 List

Fuente

Colmea

👍2

Comentario más útil

Acabo de experimentar este mismo comportamiento extraño. Después de indagar en él, parecería que la propiedad rightIconButton quiere un elemento, no un componente. Intente cambiar rightIconButton={<CustomComponentListMenu />} por rightIconButton={(new CustomComponentListMenu).render()} . Para componentes funcionales sin estado, pruebe <Component /> -> Component() .

(Tenga en cuenta que React.createElement(Component) no funciona; no he investigado los detalles de por qué)

Acabo de comenzar a usar React y no sé si esto es intencional o no, pero un mensaje de error cuando rightIconButton se establece en un componente en lugar de un elemento puede estar en orden, en lugar de fallar de esta manera desconcertante .

jlroettger en 19 may. 2016

👍7

Todos 4 comentarios

(Tenga en cuenta que React.createElement(Component) no funciona; no he investigado los detalles de por qué)

jlroettger en 19 may. 2016

👍7

¿Estás pasando ...props ? Tuve el mismo problema con Avatar. Supongo que MUI establece algunos accesorios internamente.

Mi componente Avatar personalizado se ve así:

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

Tuve que eliminar mis proptypes personalizados antes de pasarlos, de lo contrario MUI se quejaría de los accesorios desconocidos.

jonespen en 27 sept. 2016

👍2

Sí, este fue un error de solo comenzar con React, solo necesitaba pasar ...props

jlroettger en 29 sept. 2016

👍1

Hemos estado portando el componente en la rama v1-beta . Lo reimplementamos desde cero. Si bien no lo hemos probado, creo que lo más probable es que el problema esté solucionado en esa rama. Por lo tanto, lo cierro.
Aún así, aceptaremos correcciones de relaciones públicas hasta que v1-beta se haga cargo de la rama maestra.