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
You can use className=""
So in your case, put <div className="topMenuIndex LoginStatus"></div>
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.<div className="topMenuIndex LoginStatus">Hello jim</div>? If this is not what you're looking for, I may be misunderstanding your question.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!
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 });
