react reference stylesheet in css module

Question

I have the following .scss file

div.topMenuIndex {
  ul {
    &:before {
      content: "☰";
      padding: .15em .25em;
      text-align: center;
      background: #ea764b;
      color: #f8d4c6;
    }   
  &.LoginStatus{
    background: azure;
  }
}

Now I import this into my react component

import styles from "./TopMenuIndex.scss";

When defining the component how do I refer to div.topMenuIndex.LoginStatus in my div element

Hello jim

Please check this [post](http://stackoverflow.com/questions/42220913/server-side-rendering-of-css-modules) I asked a few days ago. — Ming Soon, Feb 25 '17 at 00:07

score 0 · Answer 1 · answered Feb 23 '17 at 21:59

0

You can use className=""

So in your case, put <div className="topMenuIndex LoginStatus"></div>

answered Feb 23 '17 at 21:59

adam

53
1
10

I want to refer to topMenuIndex and LoginStatus, if I say topMenuIndex then only topMenuIndex style will be applied? – tmp dev Feb 23 '17 at 22:03
If you use `className="topMenuIndex">`, then the `background: azure` won't be applied, because that requires the `LoginStatus` class to be on the div as well. At the moment it looks like you don't have any specific styling for `topMenuIndex` in your css. You could test this by adding a `background-color: red` and see that it is applied. – adam Feb 23 '17 at 22:06
I need to have something like this
Hello jim
Only thing is that I need to refer to this through the styles. – tmp dev Feb 23 '17 at 22:18
Can you try `
Hello jim
`? If this is not what you're looking for, I may be misunderstanding your question. – adam Feb 23 '17 at 22:32
This will not work, I need to provide something like
– tmp dev Feb 23 '17 at 22:38
Oh, I see what you mean. In this case I'm not sure, sorry. – adam Feb 23 '17 at 22:51

score 0 · Answer 2 · answered Feb 24 '17 at 08:59

0

The styles object will have all your classnames as key and corresponding hash as the value.

So your need to use styles[<classname>]

Example

<div className={`${styles[topMenuIndex]} ${styles[LoginStatus]}`} />

Hope this helps!

answered Feb 24 '17 at 08:59

Pranesh Ravi

18,642
9
46
70

score 0 · Answer 3 · answered Feb 24 '17 at 23:57

I highly recommend using react-css-modules if you can. You will just need to wrap your component with a decorator, but using your styles will be so much easier.

Here's how npm i -S react-css-modules

In YourComponent.js import CSSModules from 'react-css-modules' import styles from "./TopMenuIndex.scss";

Then somewhere down in your component you will just use them as names, but using styleName instead of className

<div styleName="topMenuIndex LoginStatus">test</div>

and you export your component like this at the end

export default CSSModules(YourComponent, styles, { allowMultiple: true });

react reference stylesheet in css module

3 Answers3