Using CSS Modules How to Define More Than One Style Name

using css modules how do I define more than one style name

You can add multiple classes using css modules as follows:

className={`${styles.description} ${styles.yellow}`}

e.g.

function Footer( props) {
    return (
        <div className={styles.footer}>
            <div className={`${styles.description} ${styles.yellow}`}>
              <p>this site was created by me</p>
            </div>
        </div>
    );
}

Using react-css-modules you can use normal class name syntax:

<div styleName='description yellow'>

and you specify allowMultiple: true for multiple classes

CSS Modules with React- using multiple classNames

className={`${styles.button} ${styles.button__decrease}`} should do the job!

How can i add more than one and dynamic classes in CSS modules react

You can do that via using more than option:

• I prefer to use classnames lib to handling classes conditions in nice way, just you need to import library and start use it..for example
  

• You can use join to build all needed class

• You can build all needed class out side the className and pass it to className which its make it easy to check where is the mistake and you can control the values in easy way too..

Applying style of multiple CSS classes using React CSS Modules

The reason the style wasn't being applied is because I had supplied the css 'active' class as a string value rather than as a reference from the imported CSS module:

import classes from "./RecipeSection.module.css";

Then I could supply the reference:

${classes.active}

The real clue was that in the initial generated html, my active class had not been allocated a hash as the recipe-section class had

<div class="RecipeSection_recipe-section__Asce8 active">

Next.js module css multiple class name

Multiple classname is not a problem, but normally you need to put the classname together like a string operation.

  <Button className={`${Style.MyModuleCssClass} my-global-class`} />

Unless you have a library to help you, https://github.com/JedWatson/classnames#readme

How to use class names with css module style names?

As the value of css module style name is string, you can simply do like this:

<div className={`col-sm-2 col-xs-12 ${styles.divide}`}>

The syntax some string ${someVar} is string template literals

React App with css module multiple classes

you should pass the classes declared at your css modules through your styles object, instead of passing a string:

      <button className={[styles.class, styles.awesome, styles.great].join(' ')}>
          hello world
      </button>

Multiple classNames with CSS Modules and React

Using classnames and es6:

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

Using classnames and es5:

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');

---

Related Topics