Access global classes from within CSS module

Question

I'm working on a project that uses ReactJS and CSS modules with each react component having a corresponding SASS file.

When writing the CSS each class gets appended with the 'triple underscore random string' e.g. .myClass__e7G3A

My app appends a class (top' or 'down') to the body tag depending on scroll position and I want my component to respond to this.

The problem I have is if I add either .top or .down within the CSS module then it appends the unique identifier to the end of that class too.

e.g.

JSX:

<div className={styles.main}>
  Main content goes here.
</div>

Rendered HTML:

<body class="top">
  <div class="main___iZy2A">
    Main content goes here.
  </div>
</body>

SASS file:

.top .main {
  margin-top: 0;
}
.down .main {
  margin-top: 100px;
}

Compiled CSS:

.top___Gvf3S .main___iZy2A {
  margin-top: 0;
}
.down___kpd3S .main___iZy2A {
  margin-top: 100px;
}

Desired CSS outcome: (.top and .down without unique identifier)

.top .main___iZy2A {
  margin-top: 0;
}
.down .main___iZy2A {
  margin-top: 100px;
}

I'm sure I'm just missing a simple identifier or something that could achieve this.

Hope you can help. Thanks.

Ori Drori · Accepted Answer · 2016-11-16 10:54:01Z

8

Use :global on the selector:

:global(.top) .main___iZy2A {
  margin-top: 0;
}
:global(.down) .main___iZy2A {
  margin-top: 100px;
}

Or a combination of :global and :local if you have more the one global selector:

:global .top .top--left :local .main___iZy2A {
  margin-top: 0;
}
:global .down .down--right :local .main___iZy2A {
  margin-top: 100px;
}

answered Nov 16, 2016 at 10:54

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ash Over a year ago

Thanks. I figured it would be something simple.

Johnny Copperstone Over a year ago

I get 'Error: composition is only allowed when selector is single :local class name not in' when attempting to do just this. Do you have any ideas where this might be coming from?

Ori Drori Over a year ago

Seems like a problem in the configuration of your CSS modules. Check the css loader if you're using webpack.

Collectives™ on Stack Overflow

Access global classes from within CSS module

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related