How to use Material-UI theme with styled-components?

[danielkarlsson]

How can I access the mui theme with the example shown in the documentation on how to use the styled components API?

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

The recommended approach is to use two theme provider:

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import {
  StylesProvider,
  ThemeProvider as MuiThemeProvider,
  createMuiTheme,
  darken,
  fade,
} from '@material-ui/core';

const myTheme = createMuiTheme();

const StyledButton = styled.button`
  ${({ theme }) => `
  padding: ${theme.spacing(1, 2)};
  border: 1px solid;
  cursor: pointer;
  outline: 0;
  border-radius: ${theme.shape.borderRadius}px;
  color: ${theme.palette.primary.contrastText};
  background-color: ${theme.palette.primary.main};
  border-color: ${theme.palette.primary.main};
  transition: ${theme.transitions.create(['background-color', 'box-shadow'])};
  &:hover {
    background-color: ${darken(theme.palette.primary.main, 0.1)};
    border-color: ${darken(theme.palette.primary.main, 0.2)};
  }
  font-size: 18px;
  ${theme.breakpoints.up('md')} {
    font-size: 16px;
  }
  `}
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <MuiThemeProvider theme={myTheme}>
        <ThemeProvider theme={myTheme}>
          <StyledButton>Styled Components</StyledButton>
        </ThemeProvider>
      </MuiThemeProvider>
    </StylesProvider>
  );
}

[malik-sahab]

The recommended approach is to use two theme provider:

@oliviertassinari will this approach cause performance issues?

[oliviertassinari]

will this approach cause performance issues?

@malik-sahab None that I'm aware of.

[R-Oscar]

@oliviertassinari is there any way to use single theme provider? I would like to have determenistic classnames

[oliviertassinari]

@R-Oscar the class names of styled-components aren't deterministic, there is no way to make them so. Stick to JSS in this case.

[R-Oscar]

@oliviertassinari I mean classes of @material-ui/core (such as MuiSvgIcon-root). According to the spec there should be only one theme provider in order to achieve that, but I would like to keep styled components in my project

[oliviertassinari]

#10098 (comment) will do the task.