material-ui and styled override specificity issue

I’m using material-ui(https://material-ui-next.com/) components library. In this library there is for example component Typography for rendering text, it supports className to override styles. I’m using styled function from styled-components to override default styles of Typography component like this:

const StyledTypography = styled(Typography)`
	color: palevioletred;
	font-weight: bold;
        any other styles
`;

but some styles are not overridden because of specificity. Maybe because material-ui library adds style tag to the end of head tag after styled-components does the same. I did not find a way except of using !important to override styles. Maybe there is some way to avoid using !important?

[mxstbr]

You hit the nail on the head with your analysis, this in indeed because material-ui injects their styles after the styled-components ones. As you also said, the way to work around this is to increase the specificity, which you could do with !important but that’s a pain the butt.

I’d probably use this hack:

const StyledTypography = styled(Typography)`
  && {
    color: palevioletred;
    font-weight: bold;
  }
`;

Each & gets replaced with the generated class, so the injected CSS then looks like this:

.StyledTypography-asdf123.StyledTypography-asdf123.StyledTypography-asdf123 {
    color: palevioletred;
    font-weight: bold;
}

The repeated class bumps the specificity high enough to override the source order without being very tedious to write! 🎉

[oliviertassinari]

We have added a documentation section for using styled-components with Material-UI. The demo shows how to configure JSS to avoid the !important issue.