Material-ui: Using Material-UI with SCSS

[sepehr1313]

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-next.com/guides/interoperability

[sepehr1313]

@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.

[sepehr1313]

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 MuiThemeProvider 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 documentated :).

[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.