0
436
VistasAgregando sx prop a un componente personalizado
Estoy usando MUI v5, junto con Gatsby Image. Espero mantener la consistencia de mi sintaxis de estilo en toda la aplicación, así que traté de agregar el accesorio sx a GatsbyImage .
Esto es lo que he intentado:
<Box component={GatsbyImage} sx={/* my sx styles */} /> Esto hace lo que quiero. Sin embargo, noté que el accesorio sx de alguna manera pasa al img . Esto termina obteniendo un <img sx=[object Object]/> en mi HTML.
Aunque esto realmente no afecta mi aplicación de todos modos, me pregunto si hay mejores formas de lograrlo.
2 Respuestas
Responde la pregunta0
Puede usar la función de styled para agregar el accesorio sx a su componente personalizado de esta manera:
import { styled } from "@mui/material/styles"; const ComponentWithSx = styled(YourCustomComponent)(); <ComponentWithSx sx={{ width: 30, height: 30, backgroundColor: "primary.dark" }} /> Cuando pasa GatsbyImage al component prop de Box , GatsbyImage se usa como componente raíz dentro de Box y el objeto sx se pasa al elemento DOM:
function Box(props) { const { component, ...other /* other includes sx prop */ } = props; return <component {...other} />; }); Si desea utilizar Box , debe crear un componente contenedor para filtrar el accesorio sx :
function MyGatsbyImage({ sx, ...props }) { return <GatsbyImage {...props} />; } 
0
Para cualquiera que intente diseñar un componente personalizado, lo hice de esta manera:
Use la función de estilo materialUI, así:
import { styled } from '@mui/material/styles'; import Star from '../components/Star'; //my custom component [...] const StarStyled = styled(Star)({ position: 'absolute', right: 5, bottom: 5 });Luego, en su función de renderizado, llame a su componente recién diseñado:
<StarStyled />Ahora, su componente personalizado (en este caso, el componente "Estrella") recibirá una propiedad className, por lo que puede usar la propiedad así:
const Star = ({className}) => { return ( <span className={className}> ...whatever else you want your component to do </span> ); }; export default Star;