@mui/styled-engine

Customization of MUI components

This feature allows developers to customize MUI components using a familiar CSS-in-JS syntax. The code sample demonstrates how to create a custom styled version of an MUI Button component with a specific background color and hover state.

{"const StyledButton = styled(Button)({ backgroundColor: 'lightblue', '&:hover': { backgroundColor: 'blue' } }); return <StyledButton>Styled Button</StyledButton>;"}

Theming support

The package provides theming support, enabling developers to define a theme object and apply it to MUI components using a ThemeProvider. The code sample shows how to define a custom theme with a primary color and apply it to a Button component.

{"const theme = createTheme({ palette: { primary: { main: '#007bff' } } }); return <ThemeProvider theme={theme}><Button color='primary'>Themed Button</Button></ThemeProvider>;"}

Style overrides

Developers can use the package to override default styles of MUI components at the theme level. The code sample illustrates how to override the font size of all Button components within a theme.

{"const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { fontSize: '1rem' } } } } }); return <ThemeProvider theme={theme}><Button>Button with Style Overrides</Button></ThemeProvider>;"}