How to style material ui next components with styled components and SASS

2
votes

We want to use the material ui next components in our application where we're using styled components with SASS. To achieve this we use webpack and a raw-loader to import the generated CSS and apply the styles like so:

const sidebarStyles = require('./Sidebar.sass');

const StyledDrawer = styled(Drawer)`
    ${sidebarStyles}
    `

We're trying this approach because styled components seem like a good method for styling react components, but we want to use regular sass files so our designers can create the styles like normal, without having to write css-in-js.

Now the issue I'm facing with material ui components is that many components have children (e.g. the Drawer component has a Paper component as its child) and I'm struggling to find a good way to style those with our approach - I know the recommended way is to use the classes prop:

const styles = theme => ({
    drawerPaper: {
        width: 250
    }
});

classes={{
    paper: classes.drawerPaper,
}}

But this doesn't work with our requirement to import the styles as text from an external .sass file.

Would this even be possible at all and what would be the best way?

1
reactjssassmaterial-uistyled-components

1 Answers

1
votes

You should be able to pass the name of the class from your sass file to the classes object.

classes={{
  paper: `SASS_CLASS_NAME_HERE`,
}}

More Info: https://material-ui-next.com/customization/overrides/#overriding-with-classes