Use theme.spacing function in override in createMuiTheme

Question

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?

It is not the answer you need but it might help you https://stackoverflow.com/questions/47977618/accessing-previous-theme-variables-in-createmuitheme — ihist, Jan 12 '21 at 19:26
@ihist if I remember correctly this is basically what I ended up doing — Jordan, Jan 13 '21 at 22:12
@Jordan, if I understand correct what you want to achieve, the MUI documentation should help you: https://mui.com/material-ui/customization/spacing/ . const theme = createTheme({ spacing: [0, 4, 8, 16, 32, 64], }); theme.spacing(2); // = '8px' — Akis, Jul 02 '22 at 14:50

score 6 · Accepted Answer · answered Jul 05 '22 at 13:59

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)
        })
      }
    }
  }
})

Use theme.spacing function in override in createMuiTheme

1 Answers1