En mi opinión, separar el estilo del código hace que el código sea más claro y limpio. El uso de estilo en línea ( style={{}} ) se ha considerado una práctica básica para mí.
En Mui V4 fue fácil: acabo de crear un archivo de estilos y lo importé a mi código de componente usando makeStyles() y useStyles() .
Ahora, con el nuevo accesorio sx en Mui V5, no tengo idea de cómo evitar el estilo en línea. ¿Algunas ideas?
También puedes hacer algo similar con sx. Cree un nuevo archivo de estilos y defina sus objetos allí. Solo úsalos en el atributo sx :
estilos.ts:
const gridStyles = { backgroundColor: "blue", paddingBottom: 2, paddingRight: 2, marginTop: 2, marginLeft: "auto", marginRight: "auto", maxWidth: 500 }; export default gridStyles; import gridStyles from './styles'; export default function FullWidthGrid() { return ( <> <Grid container sx={gridStyles} </Grid> ); }para responder a @Yahli Gi, si quieres acceder al tema, hay dos formas:
Método uno:
const gridStyles = (theme) => ({ backgroundColor: "blue", paddingBottom: 2, paddingRight: 2, marginTop:theme.spacing(1), marginLeft: "auto", marginRight: "auto", maxWidth: 500 }); export default gridStyles;Método dos:
const gridStyles = { backgroundColor: "blue", paddingBottom: 2, paddingRight: 2, marginTop: (theme) => theme.spacing(1), marginLeft: "auto", marginRight: "auto", maxWidth: 500 }; export default gridStyles;Las importaciones son las mismas para los dos ejemplos anteriores. Además, mui inyecta automáticamente el tema en el objeto, por lo que no es necesario llamar a la función usted mismo en la importación.
import gridStyles from './styles'; export default function FullWidthGrid() { return ( <> <Grid container sx={gridStyles} </Grid> ); }