material-ui and styled override specificity issue

[pavel06081991]

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! 🎉

[pavel06081991]

@mxstbr, thanks a lot. Lots of my colleagues faced with this problem and used hacks like this one #860 (comment)

I could not find your option anywhere on internet and in styled-components documentation. So maybe you could add it to docs?

P.S. thanks for react-boilerplate

[mxstbr]

Yep, a PR to add a FAQ entry ("How to override styles?" maybe? Or "How to work around specificity issues?"? Dunno) would be very welcome: https://github.com/styled-components/styled-components-website

[unutoiul]

How can we export the styles from the component.jsx in a separate scss file and then import them with styled?

[unutoiul]

also how can you get the material UI theme into my styled?

[adamchenwei]

@mxstbr pretty cool and out-of-the-box hack there! love it!

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

[kristojorg]

If anybody is running into this issue, and can't use the jss comment solution, here is a codemod to add specificity to all styled-components:

styled-specificity-codemod.js

For the record, I ran into this problem because I use Gatsby, which renders the base html document template in react, and therefore I couldn't find any way to add a <-- jss-insertion-point --> html comment. Instead, I codemoded all my files to add specificity to the generated styled-components css. I haven't thoroughly tested the script, but it worked for me so far!

[oliviertassinari]

@kristojorg I'm happy to hear you found a solution with Gatsby. I wish we had an example along side Next.js in the repository.
Regarding not beeing able to provide the injection point. I was facing the same issue with codesandbox and with Next.js. You have a different solution available. You can add the HTML comment in JavaScript before the application render.

[rpellerin]

Hi! How can this be automated, meaning all styled components get a greater specificity? I've been looking at doing this through a babel plugin but could not find how.
Writing && { ... } for each component is pretty tedious and it reduces code readability.
Thanks!

[adamchenwei]

@oliviertassinari the link on that page https://github.com/mui-org/material-ui/blob/28c1f7ab5d60d757c5fbdb8dd11194b3ca0141d2/customization/css-in-js#css-injection-order
is not working, go to 404.

[oliviertassinari]

@adamchenwei https://github.com/mui-org/material-ui/blob/f62796e91495385ecf5d071c1f4f8f22b865bbd5/docs/src/pages/customization/css-in-js.md#css-injection-order

[oliviertassinari]

By the way, you can get a styled components API like with Material-UI. It only takes a few lines of code: https://twitter.com/olivtassinari/status/946517606009274369

[techniq]

@oliverturner can something like this be used to pass styles to an inner component. For example, how could you pass width to the paper element within Drawer from a variable (which might be dynamic, provided by a higher up component)?

For example, this kind of works (and 240 could have been read from props or a global variable). I didn't know if there is a better approach using JSS / Material-UI styling?

I ask because I'm working on creating a component to help orchestrate the Drawer and AppBar (show/hide when menu icon is pressed, show/hide based on media query, etc). I have this working using glamorous, but didn't want to force people to bring in this dependency unnecessarily.

[oliviertassinari]

@techniq Material-UI supports a global CSS mode, with explicit deterministic class names. Maybe it can help too.

[techniq]

I saw that with the warnings

It's really painful (unless I'm missing something) just to set the width of a Drawer. It looks like I'll also need to grab all the original styles for paper for when I override the classes.paper classname?

[oliverturner]

@techniq I think you meant to reference @oliviertassinari rather than me 😉

Nevertheless... would this work?

const StyledDrawer = styled(Drawer)`
  & > .paper {
    width: 240px;
  }
`;

[techniq]

@oliverturner oops, my bad 😄

Regarding your example, since the paper classname is dynamically generated by JSS (it's not className="paper" but something like MuiDrawer-1234 in dev and jss1234 in prod) this would not work, but if you declare paper to use a static classname, you could. This is an idea I had when using glamorous...

const StyledDrawer = glamorous(Drawer, { withProps: { classes: { paper: 'paper' }}})
({
  '& .paper': {
    width: 240,
    backgroundColor: 'blue',
  }
});

which something similar could be done using styled-components attrs I image, or you can declare your component dynamically, such as this (which was my original approach).

const StyledDrawer = glamorous(({ className, ...props }) => (
  <Drawer className={className} classes={{
    paper: 'paper'
  }} {...props} />
))({
  '& .paper': {
    width: 240,
    backgroundColor: 'green',
  }
});

if interested, you can see some of the discussion regarding this approach on this glamorous issue.

I was hoping to find something similar using Material UI / JSS out of the box for a component I looked to publish to npm and didn't want to bring in a dependency others might not already be using/want (glamor/glamorous/styled-components).

Anyways, this is pretty off-topic on this issue at this point. Sorry for all the noise.

[Danilo-Araujo-Silva]

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.

[rocketraman]

I know this is a little off-topic for styled-components, but I'll add one more note that I didn't see anyone point out above...

In some cases, the root of the material-ui component is not the one you want to override, and therefore one cannot use the && trick (see relevant comment from @oliviertassinari here: mui/material-ui#9978 (comment)).

For example, for the material-ui Drawer, paper is not the root element and therefore this does not work:

const StyledDrawer = styled(Drawer)`
  && {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  width: ${props => props.drawerWidth}px;
`

In these cases one has to use the method 1 from @Danilo-Araujo-Silva 's gist. This works:

const StyledDrawer = styled(({ drawerWidth, ...rest }) => <Drawer {...rest} classes={{paper: 'paper-override'}} />)`
  & .paper-override {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  width: ${props => props.drawerWidth}px;
`

You can even add a withTheme wrapper to that to get access to the material-ui theme as prop.theme.

[wmertens]

Can't the Paper component be interpolated?

…

On Mon, Feb 12, 2018, 7:28 AM Raman Gupta, ***@***.***> wrote: I know this is a little off-topic for styled-components, but I'll add one more note that I didn't see anyone point out above... In some cases, the root of the material-ui component is not the one you want to override, and therefore one cannot use the && trick (see relevant comment from @oliviertassinari <https://github.com/oliviertassinari> here: mui/material-ui#9978 (comment) <mui/material-ui#9978 (comment)> ). For example, for the material-ui Drawer, paper is not the root element and therefore this does not work: const StyledDrawer = styled(Drawer)` && { position: relative; height: 100%; overflow: hidden; } width: ${props => props.drawerWidth}px; ` In these cases one has to use the method 1 from @Danilo-Araujo-Silva <https://github.com/danilo-araujo-silva> 's gist. This works: const StyledDrawer = styled(({ drawerWidth, ...rest }) => <Drawer {...rest} classes={{paper: 'paper-override'}} />)` & .paper-override { position: relative; height: 100%; overflow: hidden; } width: ${props => props.drawerWidth}px; ` You can even add a withTheme wrapper to that to get access to the material-ui theme as prop.theme. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1253 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlpGQqx3BUOavIzhAm_wZiJy6C18Aks5tT9odgaJpZM4P-8Ns> .

[rocketraman]

Can't the Paper component be interpolated?

@wmertens What do you mean? Do you mean:

paper {
  ...
}

If so, no, because the actual class names are generated at runtime by JSS.

[wmertens]

Ah, the battle for the winning css-in-js framework is still raging :)

…

On Mon, Feb 12, 2018, 8:31 PM Raman Gupta, ***@***.***> wrote: Can't the Paper component be interpolated? @wmertens <https://github.com/wmertens> What do you mean? Do you mean: paper { ... } If so, no, because the actual class names are generated at runtime by JSS. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1253 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlg8eBqeHtoV84y-OFb8cAUiDBVuiks5tUJGRgaJpZM4P-8Ns> .

[johncmunson]

I see styled-components and/or emotion as pillars of any React based UI. In my mind, the fact that material-ui doesn't jive well with either of these two libraries means that it is completely ruled out of selection for almost any serious project. I've had far more success by using a combination of Rebass, styled-system, and styled-components.

Still want that "material" look? Fine. Material Design is just a design system/philosophy after all, and the stack mentioned above gives you the primitives to implement Material Design on your own.

[oliviertassinari]

@johncmunson This problem should already be solved in Material-UI v4: the examples.

import styled from 'styled-components';
import { TextField } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.focused {
    color: green; 💚
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red; 🧡
    }
    &:hover fieldset {
      border-color: yellow; 💛
    }
    &.focused fieldset {
      border-color: green; 💚
    }
  }
`;

We will continue the styled-components effort in v5: mui/material-ui#6115.

---

Do you have an example of frustration with v3? I want to make sure it's correctly handled in v4.

[igortas]

@johncmunson This problem should already be solved in Material-UI v4: the examples.

import styled from 'styled-components';
import { TextField } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.focused {
    color: green; 💚
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red; 🧡
    }
    &:hover fieldset {
      border-color: yellow; 💛
    }
    &.focused fieldset {
      border-color: green; 💚
    }
  }
`;

We will continue the styled-components effort in v5: mui-org/material-ui#6115.

Do you have an example of frustration with v3? I want to make sure it's correctly handled in v4.

v5 mui has issue with specificity, does not override theme settings, when u create styled components on top of already defined base component with global theme.

const StyledInput = styled(TextField)(({ theme }: { theme: Theme }) => {
  console.log(theme)
  return {
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'red',
      },
      '&:hover fieldset': {
        borderColor: 'yellow',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'green',
      },
    },
  };
});