Question 210852 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Pass a value from react component to scss

I have the following code in .jsx component,

<div className={type === "travellist" ? "headerContainer listmode" : "headerContainer"}>

In .scss how do I use the listmode for the class headerContainer?
For example:

.headerContainer.listmode{

            margin: 20px 0px 40px 0px;
            }
or 
    .headerContainer{

            margin: 20px 0px 100px 0px;
            }
Tags:

2

Answers


  1. 0

    You can invert the relationship with css-modules, which I recommend setting up in a build system like Webpack (e.g. with the sass-loader & css-loader plugins). The class names can then be imported into your JavaScript. By default, each class is locally scoped (i.e. given unique names) but that can be changed with the available options.

    /* In your stylesheet */
.headerContainer.listmode {
    margin: 20px 0px 40px 0px;
}
.headerContainer{
    margin: 20px 0px 100px 0px;
}

    // In JS
import { headerContainer, listmode } from './style.scss';

const className = type === 'travellist' ? `${headerContainer} ${listmode}` : `${headerContainer}`;
<div className={className}>
    Login or Signup to reply.
  2. 0

    I think this article will help you.
    Can i send parameters from React to SCSS?

    But I’m not sure why we need to send variables from React components to scss. I would appreciate it if you could let me know.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search