DEV Community

Discussion on: Material UI 5 - the easiest way to migrate from makeStyles to emotion

Collapse
 
huydhoang profile image
Huy • Edited

Good one. To people setting up brand new MUI v5 projects in 2021, the official way to override default styles now is through the sx prop or the styled() utility function. Custom theme properties could be accessed via importing your theme and wrapping components inside ThemeProvider.

import { ThemeProvider } from '@mui/system';
import theme from '../theme';

<ThemeProvider theme={theme}>
  <Container sx={{ bgcolor: theme.palette.primary.main, }}>
  ...
  </Container>
</ThemeProvider>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
atonchev profile image
a-tonchev • Edited

Acutally you can just use 'primary.main' for color:

  <Container sx={{ bgcolor: 'primary.main', }}>
     ...
  </Container>
Enter fullscreen mode Exit fullscreen mode