Components
The theme's `components` key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more.
Global style overrides
You can use the theme's styleOverrides
key to potentially change every single style injected by MUI into the DOM.
const theme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontSize: '1rem',
},
},
},
},
});
<ThemeProvider theme={theme}>
<Button>font-size: 1rem</Button>
</ThemeProvider>
The list of each component's classes is documented under the CSS section of its API page.
To override a lab component's styles with TypeScript, check this section of the documentation.
Default props
You can change the default of every prop of a MUI component.
A defaultProps
key is exposed in the theme's components
key for this use case.
const theme = createTheme({
components: {
// Name of the component
MuiButtonBase: {
defaultProps: {
// The props to change the default for.
disableRipple: true, // No more ripple!
},
},
},
});
<ThemeProvider theme={theme}>
<Button>Change default props</Button>
</ThemeProvider>
To override lab component styles with TypeScript, check this page.
Adding new component variants
You can use the variants
key in the theme's components
section to add new variants to MUI components. These new variants can specify what styles the component should have when specific props are applied.
The definitions are specified in an array, under the component's name. For each of them a CSS class is added to the HTML <head>
. The order is important, so make sure that the styles that should win are specified last.
const theme = createTheme({
components: {
MuiButton: {
variants: [
{
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed ${blue[500]}`,
},
},
{
props: { variant: 'dashed', color: 'secondary' },
style: {
border: `4px dashed ${red[500]}`,
},
},
],
},
},
});
If you're using TypeScript, you'll need to specify your new variants/colors, using module augmentation.
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
dashed: true;
}
}
<ThemeProvider theme={theme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
<Button variant="dashed" color="secondary" sx={{ m: 1 }}>
Secondary
</Button>
<Button variant="dashed" size="large" sx={{ m: 1 }}>
Large
</Button>
<Button variant="dashed" color="secondary" size="large" sx={{ m: 1 }}>
Secondary large
</Button>
</ThemeProvider>
Theme variables
Another way to override the look of all component instances is to adjust the theme configuration variables.
const theme = createTheme({
typography: {
button: {
fontSize: '1rem',
},
},
});
<ThemeProvider theme={theme}>
<Button>font-size: 1rem</Button>
</ThemeProvider>