admin管理员组

文章数量:1418148

I'm working on a project that uses ReactJS and CSS modules with each react ponent 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 ponent 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 oute: (.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.

I'm working on a project that uses ReactJS and CSS modules with each react ponent 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 ponent 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 oute: (.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.

  • javascript
  • css
  • reactjs
  • sass
  • css-modules
Share Improve this question asked Nov 16, 2016 at 10:51 AshAsh 131 silver badge3 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

Use :global on the selector:

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

Or a bination 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;
}

本文标签： javascriptAccess global classes from within CSS moduleStack Overflow

版权声明：本文标题：javascript - Access global classes from within CSS module - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745279353a2651349.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。