Using Material-UI with SCSS

[frntendev]

Hello,

I have an issue about using styles in react component. As I can see there are 3 different ways that you provide for styling and customizing the component but what if I want to use SCSS instead of either withStyle function or importing pure css file into js file?

For example I want to import my scss file into ButtonComponent.js file like as below: import './buttonStyle.scss' Put my theme configuration in a scss file named theme.scss and import theme.scss into my scss files and make use of the scss classes in className of the components.

[oliviertassinari]

@sepehr1313 Are you looking for one of these approaches?

• Raw CSS
• Global CSS
• CSS Modules

https://material-ui.com/guides/interoperability

[frntendev]

@oliviertassinari Actually I want to use something like CSS Modules but with a difference. I want to import .scss file instead of .css file. and I don't want to use withStyle function in each component. But the thing is how can I make change in the default theme in this way?

Please see below.

import React from 'react';

import styles from './SCSSModulesButton.scss';
import Button from 'material-ui/Button';
import SwipeableViews from 'material-ui/SwipeableViews';

function SCSSModulesButton() {
  return (
    <div>
       <SwipeableViews
          axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
          index={this.state.value}
          onChangeIndex={this.handleChangeIndex}
        >
          <TabContainer dir={theme.direction}>Item One</TabContainer>
          <TabContainer dir={theme.direction}>Item Two</TabContainer>
          <TabContainer dir={theme.direction}>Item Three</TabContainer>
        </SwipeableViews>
      <Button className={styles.button}>
        CSS Modules
      </Button>
    </div>
  );
}

export default SCSSModulesButton;

We are using theme.direction to make sure about the direction. when I'm using CSSModules approach, how can I get the direction in JS files?

[oliviertassinari]

I want to import .scss file instead of .css file

@sepehr1313 Sure go ahead, it has nothing to do with Material-UI

how I can make change in the default theme in this way?

I don't understand the question.

[frntendev]

Let me put it this way. In below code there is a function for styles that uses theme.

const styles = theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500,
  },
});

But when I import a scss file into the project I don't have theme in this way. My question is how can I change this theme via importing scss files?

[oliviertassinari]

My question is how can I change this theme via importing scss files?

@sepehr1313 What do you mean by changing the theme?

• You can change the theme with the ThemeProvider component.
• You can change the style in many different ways.
• You can't access a JS object in CSS. Maybe there is some webpack plugin workaround with SCSS. For instance https://github.com/tompascall/js-to-styles-var-loader might do the job:

theme.js

import { createMuiTheme } from 'material-ui/styles';
import purple from 'material-ui/colors/purple';
import green from 'material-ui/colors/green';

export default createMuiTheme({
  palette: {
    primary: purple,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

scss

.root {
  require('relative/path/to/theme.js').palette.background;

  background-color: $paper;
  width: 500;
}

[oliviertassinari]

@sepehr1313 If you find an elegant solution, we would love to have it documented :).

[sureshakula007]

Hi @oliviertassinari , I am getting error while using scss variables colours in makeStyles

Please check the below code import "../assets/scss/variables.scss"; // scss color variables

const useStyles = makeStyles(theme => ({ root: { color: "{$primary-color}", display: "flex", height: 22, alignItems: "center" } }));

[oliviertassinari]

Do you have a reproduction?

[sureshakula007]

My question is can I use bootstrap scss colour variables in react material makestyles function.

[oliviertassinari]

Yes, you should be, look for a SCSS to JavaScript object converter.

[sureshakula007]

Thank you, can provide the sample example you if you have.

[oliviertassinari]

This should help https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

[Air2air22]

Have to admit this is one thing I really hate about material-ui. Somebody decided that "Theming" should be added as a whole new layer of difficulty we all have to learn. We already had perfectly good separation of concerns with jsx/ts importing css, now blown completely to hell with the nightmare of useStyles/makeStyles - a huge step backwards. I'm on this page to do the very simple task of adding sass/scss to my build and find nothing but hacks.

[oliviertassinari]

@Air2air22 Did https://material-ui.com/guides/interoperability/#plain-css help?

[hermanc-fda]

Have to admit this is one thing I really hate about material-ui. Somebody decided that "Theming" should be added as a whole new layer of difficulty we all have to learn. We already had perfectly good separation of concerns with jsx/ts importing css, now blown completely to hell with the nightmare of useStyles/makeStyles - a huge step backwards. I'm on this page to do the very simple task of adding sass/scss to my build and find nothing but hacks.

What hacks did you need? To use sass/scss I literally installed node-sass and renamed my files to .scss and it just works. Any styles I want to override, the API docs are reasonably good in telling you what classes are added to each component; it's not perfect and sometimes you do need !important. Having said that, I still use the material-ui CSS-in-JS theming solution to ensure I'm not working 'against' the library.

[oliviertassinari]

@hermanc-fda Thanks for the feedback. If you could share the cases where !important was helpful it would be awesome. We want to minimize these cases (it should never be required).

[devevignesh]

@oliviertassinari I would like to custom styling react-big-calendar. Should I create a sass file to override default variables? Could you please suggest me the right way. Thanks

[jackson-sandland]

It would be optimal if there was an option when creating a material-ui project to allow for CSS/SCSS use instead of having to learn a totally new style framework. I also think the way classNames are appended to the DOM make development opaque since it's not entirely clear where the classes are defined / where the classNames are coming from. I do like everything material-ui has to offer but figuring out how to use a new CSS framework is slowing down development.

[mbrookes]

It would be optimal if there was an option when creating a material-ui project to allow for CSS/SCSS use

@jackson-sandland It's covered here: https://material-ui.com/guides/interoperability/#plain-css

it's not entirely clear where the classes are defined / where the classNames are coming from

They're documented on each component API page, for example: https://material-ui.com/api/accordion/#css

[DonnyVerduijn]

IMO, The whole point of having an integrated css-in-js API, is to support modularity without depending on third-party CSS frameworks. Using the same language to address different concerns, doesn't mean that these concerns cannot be separated. It even simplifies the process of modularizing a theming layer because now, one can simply implement a hooks API that is consumed inside makeStyles.

[paizle]

It would be great if there was an easy way to import MUI theme variables into Sass.

Things like MUI colors, typography and breakpoints.

[oliviertassinari]

It would be great if there was an easy way to import MUI theme variables into Sass. Things like MUI colors, typography and breakpoints.

@paizle This should do it https://github.com/tompascall/js-to-styles-var-loader

[paizle]

It would be great if there was an easy way to import MUI theme variables into Sass. Things like MUI colors, typography and breakpoints.

@paizle This should do it https://github.com/tompascall/js-to-styles-var-loader

Interesting. Ok, so going by the example: require('relative/path/to/colors.js');

What would be the path to use to import the MUI theme colors or something similar? I'm just not sure yet what I would reference here.

[githorse]

I have a wrapper that injects MUI theme variables into scss (not sass):

// ThemeWrapper.tsx
import React from 'react'
import { MuiThemeProvider, ThemeOptions } from '@material-ui/core'
import { createMuiTheme } from '@material-ui/core/styles'
import { Helmet } from 'react-helmet'

interface Props {
   theme: ThemeOptions | undefined
   children: JSX.Element
}

export default function ThemeWrapper({children, ...props}: Props) {
  const theme = createMuiTheme(props.theme)

  return (
    <MuiThemeProvider theme={theme || {}}>
      <Helmet>
        <style>
          {`
              :root {
                --palette-primary-main:   ${theme.palette.primary.main};
                --palette-primary-light:  ${theme.palette.primary.light};
                --palette-secondary-main: ${theme.palette.secondary.main};
                --palette-error-main:     ${theme.palette.error.main};
                --palette-bg-default:     ${theme.palette.background.default};
                ....
              }
         `}
        </style>
      </Helmet>

      {children}
    </MuiThemeProvider>
  )
}

// some_styles.scss
.whatever {
  color: var(--palette-primary-main)
}

(Actually I inherited this codebase and I'm not entirely sure if there are additional pieces to make that work or if that's it.)

This works reasonably well, but it's a little annoying to have to flatten out all of the nested properties of the Theme object into a top-level variables: theme.palette.primary.main → primary-main (or palette-primary-main). I would love to find a solution to cleanly inject the JS theme object into scss (or sass).