Reputation: 2523
Is there a preferred way to use the theme spacing when setting up the the theme with createMuiTheme
? I've been hard coding these values and for the most part there hasn't been an issue since most of my projects don't override the default theme spacing, but it would be nice to be able to use the theme spacing in my overrides?
Upvotes: 7
Views: 1558
Reputation: 3159
TypeScript
import { Theme } from '@mui/material';
interface StyleOverridesParams {
theme: Theme
}
export default createTheme({
components: {
MuiAppBar: {
styleOverrides: {
root: ({ theme }: StyleOverridesParams) => ({
margin: theme.spacing(2)
})
}
}
}
})
ownerState
, "the combination of runtime props and internal states" for the component, is also available in the callback.
https://mui.com/blog/callback-support-in-style-overrides/
Upvotes: 0
Reputation: 2523
This is resolved in the new Mui v5 by using a function passed to a style name
export default createTheme({
components: {
MuiAppBar: {
styleOverrides: {
root: ({ theme }) => ({
margin: theme.spacing(2)
})
}
}
}
})
Upvotes: 7