0
548
Vistas¿Cuál es el propósito de la opción shouldForwardProp en styled()?
Pude armar que shouldForwardProp especifica qué accesorios deben reenviarse al elemento envuelto pasado como una opción a styled() , pero tengo problemas para encontrar un ejemplo comprensible de su caso de uso.
¿El reenvío de accesorios aquí es similar a pasar accesorios en React?
¿Por qué uno querría evitar que ciertos accesorios se reenvíen al elemento envuelto mientras se usa styled() ?
Perdóneme por mi ignorancia o si mi pregunta carece de claridad: todavía estoy aprendiendo MUI y tratando de entenderlo.
1 Respuestas
Responde la pregunta0
Si está utilizando componentes integrados como div o span y desea permitir que el usuario personalice los estilos a través de algunos accesorios.
const MyComponent = styled('div')(({ bgColor }) => ({ backgroundColor: bgColor, }));Cuando lo estás usando así:
<MyComponent bgColor='red'>El accesorio se pasa al elemento real en el árbol DOM como atributo:
Y reaccionar se quejará, algo así como:
Warning: React does not recognize the `bgColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bgcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Esta es la razón por la que shouldForwardProp existe, para evitar que los accesorios de estilo se transmitan y creen un atributo no válido:
const MyComponent = styled('div', { shouldForwardProp: (props) => props !== 'bgColor', })(({ bgColor }) => ({ backgroundColor: bgColor, }));