MaterialUI together with styled-components, SSR

Question

I'm building a new project with SSR using Next.js, MaterialUI and styled-components. From what I know, MaterialUI uses JSS as a tool for SSR (according to the example in its repository). I wonder if anyone knows how I can make it work with styled-components. I opened issues in MaterialUI and styled-components repositories, both authors answered me that they don't know how to make it work together. But probably anyone did it already? Or at least can tell me where to dig to solve this problem. Thanks in advance!

Answer 1

You may check their docs here https://material-ui.com/guides/interoperability/#styled-components, you may check the deeper elements section if you want to override specific classes https://material-ui.com/guides/interoperability/#deeper-elements

below is my example where for the switch component

const StyledSwitch = styled(({ ...other }) => (
  <div>
    <Switch
      {...other}
      classes={{ colorSecondary: 'colorSecondary', checked: 'checked', bar: 'bar' }}
    />
  </div>
))`
  & .colorSecondary.checked + .bar {
    background-color: ${props => props.theme.lighter.toString()};
  }
  & .colorSecondary.checked {
    color: ${props => props.theme.default.toString()};
  }
`;

export default StyledSwitch;

usage

<StyledSwitch theme={lightTheme.secondary} />

this is using a theme but you can specify any color you want

Answer 2

You can use styled-components with material ui, but you'll end up needing to use !important a lot. Like this:

import Button from "material-ui/Button"

const MyButton = styled(Button)`
  background: red !important;
`

In the project I'm working on with the same combo, I've just resorted to using the JSS style material-ui wants you to use with the whole withStyles HOC..

Answer 3

Looks like we have 3 ways (could be easier, but not everything is flowers) to override Material UI styles with Styled Components. Here is my Gist.

Answer 4

I do it like this:

In head component of app:

const styleNode = document.createComment('insertion-point-jss')
document.head.insertBefore(styleNode, document.head.firstChild)

const generateClassName = createGenerateClassName()
const jss = create({
  ...jssPreset(),
  insertionPoint: 'insertion-point-jss'
})
<JssProvider jss={jss} generateClassName={generateClassName}>


        <Main />
    </JssProvider>

and then just style:

import styled from 'styled-components'
import Select from '@material-ui/core/Select'
import Input from '@material-ui/core/Input'
import React from 'react'
export const InputM = styled(({ ...other }) => (
  <Input {...other} classes={{ input: 'input' }} />
))`
  color: ${p => p.theme.textColor};
  & .icon {
    font-family: ${p => p.theme.fontFamily};
    font-size: ${p => p.theme.fontSize}px;
    color: ${p => p.theme.textColor};
  }
`