How to simulate Material UI's "theme.mixins.toolbar" using SASS

user_12165204 0
Viewed 2344

Pretty simple question here. I have been in an Mui/React/Scss rabbit hole trying to find straightforward answers around styling Mui components using SASS, and without using JSS, themes, withStyles, etc. This is a client requirement.

I am currently trying to find a SCSS workaround for the "theme.mixins.toolbar" style to prevent different layout components from overlapping, etc. I'm using Grids, but I'm still having issues.

Apologies if this has already been asked, and thanks in advance for your help.

scss-mixins material-ui reactjs sass
1 Answers

The starting point for figuring this out is to look at where the mixin is used within Material-UI. I believe this is only in Toolbar. It is also used in several demos of other components such as Drawer, but I think Toolbar is the only place in the library itself that uses it.

You can also look at the source code for the mixin itself which looks like the following:

    toolbar: {
      minHeight: 56,
      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
        minHeight: 48,
      },
      [breakpoints.up('sm')]: {
        minHeight: 64,
      },
    },

The Responsive drawer demo is one demo that uses the mixin in a couple places. The source code for the demo can be seen here: https://codesandbox.io/s/v66pl.

You can look at the styles in the <head> element within that demo and find what gets generated for MuiToolbar. Specifically, its regular class is the one that uses the mixin.

Here is the generated CSS:

.MuiToolbar-regular {
  min-height: 56px;
}
@media (min-width:0px) and (orientation: landscape) {
  .MuiToolbar-regular {
    min-height: 48px;
  }
}
@media (min-width:600px) {
  .MuiToolbar-regular {
    min-height: 64px;
  }
}

To leverage this CSS without using the theme, just copy this CSS into your SCSS file with a different class name:

.plain-css-mui-toolbar-mixin {
  min-height: 56px;
}
@media (min-width: 0px) and (orientation: landscape) {
  .plain-css-mui-toolbar-mixin {
    min-height: 48px;
  }
}
@media (min-width: 600px) {
  .plain-css-mui-toolbar-mixin {
    min-height: 64px;
  }
}

Then use this in the appropriate places. You can see this demonstrated in my altered version of the Responsive drawer demo: https://codesandbox.io/s/toolbar-mixin-3l58u

user_74959300
Related