Media query in a base component not properly overridden

Current behavior:

Take this BaseBox definition that provides yellow background for mobile (width below 768px) and red background for desktop (width of 768px and above):

const BaseBox = styled('div')`
  ${({ theme }) => `
    background-color: yellow;
    @media screen and (min-width: 768px) {
      background-color: red;
    }
  `}
`;

Then define BlueBox with the following background-color override, which should apply to all viewport widths:

const BlueBox = styled(BaseBox)`
  background-color: blue;
`;

We’d expect BlueBox to always have a blue background regardless of viewport width, and never yellow or red. However, we get a blue background for mobile (expected) and red background for desktop (not expected).

To reproduce:

See https://codesandbox.io/s/emotion-issue-template-91sn9

Try adjusting the viewport width below 768px and above 768px.

Expected behavior:

Component background is blue for all viewport widths.

Actual behavior:

Component background is blue below 768px viewport width; red otherwise.

Environment information:

• react version: 16.8.6
• emotion version: 10.0.14

[Andarist]

Right, I understand that with SCSS you can do that because you have control over the class name but in the case of Emotion you just don’t have that, styles that you compose are always assumed to be part of a single class definition so the mixins comparison is the best one because it’s how this works. We just don’t expose other composition mechanisms.

[bukowskiadam]

👋 hello,

I’ve landed here from google search. I have the same issue as @slopes321 I think that this behavior of emotion breaks “Cascading” word from CSS acronym.

I’ve prepared similar plain CSS codesandbox with that case, where it works properly: https://codesandbox.io/s/css-overrides-media-query-h4k6x

And the bit simplified case from the original report: https://codesandbox.io/s/emotion-issue-template-forked-2qe42?file=/src/index.js

const BaseBox = styled("div")`
  background-color: yellow;
  @media screen and (min-width: 768px) {
    background-color: red;
  }
  background-color: lightblue;
`;

where I think background should be lightblue, but it’s not.

From the generated code I see that above example is generated as

.css-1qgp6uu-BaseBox{background-color:yellow;background-color:lightblue;}

@media screen and (min-width:768px){.css-1qgp6uu-BaseBox{background-color:red;}}

so the order of rules is in fact changed. To keep cascading work properly we should divide it into three parts:

.css-1qgp6uu-BaseBox{background-color:yellow}

@media screen and (min-width:768px){.css-1qgp6uu-BaseBox{background-color:red;}}

.css-1qgp6uu-BaseBox{background-color:lightblue;}

Could you please provide some more details why it can’t work like in the CSS? Are there some code limitations? Thanks in advance!