Style Library Interoperability

While you can use the emotion based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principles applied here can be adapted to other libraries. There are examples for the following styling solutions:

Plain CSS
Global CSS
Styled Components
CSS Modules
Emotion

Plain CSS

Nothing fancy, just plain CSS.

PlainCssSlider.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

PlainCssSlider.js

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import './PlainCssSlider.css';

export default function PlainCssSlider() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className="slider" />
    </div>
  );
}

CSS injection order ⚠️

Note: Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives Material-UI precedence over your custom styles. To remove the need for !important, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion:

import * as React from 'react';
import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';

const head = document.getElementsByTagName('head')[0];

const emotionContainer = head.insertBefore(
  document.createElement('STYLE'),
  head.firstChild,
);

const cache = createCache({
  container: emotionContainer,
});

export default function PlainCssPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Your component tree. Now you can override Material-UI's styles. */}
    </CacheProvider>
  );
}

Deeper elements

If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2: .parent .child {}. When writing overrides, you need to do the same.

The following examples override the slider's thumb style in addition to the custom styles on the slider itself.

PlainCssSliderDeep1.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .MuiSlider-thumb {
  border-radius: 1px;
}

PlainCssSliderDeep1.js

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import './PlainCssSliderDeep1.css';

export default function PlainCssSliderDeep1() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className="slider" />
    </div>
  );
}

The above demo relies on the default className values, but you can provide your own class name with the componentsProps API.

PlainCssSliderDeep2.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .thumb {
  border-radius: 1px;
}

PlainCssSliderDeep2.js

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import './PlainCssSliderDeep2.css';

export default function PlainCssSliderDeep2() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider
        defaultValue={30}
        className="slider"
        componentsProps={{ thumb: { className: 'thumb' } }}
      />
    </div>
  );
}

Global CSS

Explicitly providing the class names to the component is too much effort? You can target the class names generated by Material-UI.

GlobalCssSlider.css

.MuiSlider-root {
  color: #20b2aa;
}

.MuiSlider-root:hover {
  color: #2e8b57;
}

GlobalCssSlider.js

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import './GlobalCssSlider.css';

export default function GlobalCssSlider() {
  return <Slider defaultValue={30} />;
}

CSS injection order ⚠️

Note: Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives Material-UI precedence over your custom styles. To remove the need for !important, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion:

import * as React from 'react';
import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';

const head = document.getElementsByTagName('head')[0];

const emotionContainer = head.insertBefore(
  document.createElement('STYLE'),
  head.firstChild,
);

const cache = createCache({
  container: emotionContainer,
});

export default function GlobalCssPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Your component tree. Now you can override Material-UI's styles. */}
    </CacheProvider>
  );
}

Deeper elements

If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2: .parent .child {}. When writing overrides, you need to do the same.

The following example overrides the slider's thumb style in addition to the custom styles on the slider itself.

GlobalCssSliderDeep.css

.MuiSlider-root {
  color: #20b2aa;
}

.MuiSlider-root:hover {
  color: #2e8b57;
}

.MuiSlider-root .MuiSlider-thumb {
  border-radius: 1px;
}

GlobalCssSliderDeep.js

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import './GlobalCssSliderDeep.css';

export default function GlobalCssSliderDeep() {
  return <Slider defaultValue={30} />;
}

Styled Components

npm

Change the default styled engine

By default, Material-UI components come with emotion as their style engine. If, however, you would like to use styled-components, you are can configure your app by following this example project. Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.

After the style engine is configured properly, you can use the experimentalStyled() utility from @material-ui/core/styles and have direct access to the theme.

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import { experimentalStyled as styled } from '@material-ui/core/styles';

const CustomizedSlider = styled(Slider)`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }
`;

export default function StyledComponents() {
  return <CustomizedSlider defaultValue={30} />;
}

Deeper elements

If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2: .parent .child {}. When writing overrides, you need to do the same.

The following examples override the slider's thumb style in addition to the custom styles on the slider itself.

import * as React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
import { experimentalStyled as styled } from '@material-ui/core/styles';

const CustomizedSlider = styled(Slider)`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }

  & .MuiSlider-thumb {
    border-radius: 1px;
  }
`;

export default function StyledComponentsDeep1() {
  return (
    <div>
      <Slider defaultValue={30} />
      <CustomizedSlider defaultValue={30} />
    </div>
  );
}

The above demo relies on the default className values, but you can provide your own class name with the componentsProps API.

import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Slider from '@material-ui/lab/SliderStyled';

const CustomizedSlider = styled((props) => (
  <Slider componentsProps={{ thumb: { className: 'thumb' } }} {...props} />
))`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }

  & .thumb {
    border-radius: 1px;
  }
`;

export default function StyledComponentsDeep2() {
  return (
    <div>
      <Slider defaultValue={30} />
      <CustomizedSlider defaultValue={30} />
    </div>
  );
}

Theme

By using the Material-UI theme provider, the theme will be available in the theme context of the styled engine too (emotion or styled-components, depending on your configuration).

⚠️ If you are already using a custom theme with styled-components or emotion, it might not be compatible with Material-UI's theme specification. If it's not compatible, you need to render Material-UI's ThemeProvider first. This will ensure the theme structures are isolated. This is ideal for the progressive adoption of Material-UI's components in the codebase.

You are encouraged to share the same theme object between Material-UI and the rest of your project.

const CustomizedSlider = styled(Slider)(
  ({ theme }) => `
  color: ${theme.palette.primary.main};

  :hover {
    color: ${darken(theme.palette.primary.main, 0.2)};
  }
`,
);

Portals

TODO: fill this section after the portal is implemented with the new styled engine.

CSS Modules

It's hard to know the market share of this styling solution as it's dependent on the bundling solution people are using.

CssModulesSlider.module.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

CssModulesSlider.js

import React from 'react';
import Slider from '@material-ui/lab/SliderStyled';
// webpack, parcel or else will inject the CSS into the page
import styles from './CssModulesSlider.module.css';

export default function CssModulesSlider() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className={styles.slider} />
    </div>
  );
}

CSS injection order ⚠️

Note: Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives Material-UI precedence over your custom styles. To remove the need for !important, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion:

import * as React from 'react';
import { CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';

const head = document.getElementsByTagName('head')[0];

const emotionContainer = head.insertBefore(
  document.createElement('STYLE'),
  head.firstChild,
);

const cache = createCache({
  container: emotionContainer,
});

export default function CssModulesPriority() {
  return (
    <CacheProvider value={cache}>
      {/* Your component tree. Now you can override Material-UI's styles. */}
    </CacheProvider>
  );
}

Deeper elements

If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2: .parent .child {}. When writing overrides, you need to do the same.

The following examples override the slider's thumb style in addition to the custom styles on the slider itself.

CssModulesSliderDeep1.module.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .MuiSlider-thumb {
  border-radius: 1px;
}

CssModulesSliderDeep1.js

import React from 'react';
// webpack, parcel or else will inject the CSS into the page
import styles from './CssModulesSliderDeep1.module.css';
import Slider from '@material-ui/lab/SliderStyled';

export default function CssModulesSliderDeep1() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider defaultValue={30} className={styles.slider} />
    </div>
  );
}

The above demo relies on the default className values, but you can provide your own class name with the componentsProps API.

CssModulesSliderDeep2.module.css

.slider {
  color: #20b2aa;
}

.slider:hover {
  color: #2e8b57;
}

.slider .thumb {
  border-radius: 1px;
}

CssModulesSliderDeep2.js

import React from 'react';
// webpack, parcel or else will inject the CSS into the page
import styles from './CssModulesSliderDeep2.module.css';
import Slider from '@material-ui/lab/SliderStyled';

export default function CssModulesSliderDeep2() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider
        defaultValue={30}
        className={styles.slider}
        componentsProps={{ thumb: { className: styles.thumb } }}
      />
    </div>
  );
}

Emotion

npm

The `css` prop

Emotion's css() method works seamlessly with Material-UI.

/** @jsx jsx */
import { jsx, css } from '@emotion/core';
import Slider from '@material-ui/lab/SliderStyled';

export default function EmotionCSS() {
  return (
    <div>
      <Slider defaultValue={30} />
      <Slider
        defaultValue={30}
        css={css`
          color: #20b2aa;

          :hover {
            color: #2e8b57;
          }
        `}
      />
    </div>
  );
}

Theme

It works exactly like styled components. You can use the same guide.

The `styled()` API

It works exactly like styled components. You can use the same guide.

Style Library Interoperability

Plain CSS

CSS injection order ⚠️

Deeper elements

Global CSS

CSS injection order ⚠️

Deeper elements

Styled Components

Change the default styled engine

Deeper elements

Theme

Portals

CSS Modules

CSS injection order ⚠️

Deeper elements

Emotion

The css prop

Theme

The styled() API

The `css` prop

The `styled()` API