Question 216317 in CSS Question posted in
Some basic documentation can be found here.

Applying multiple CSS classes from different sources (module and non)

I have found many articles and solutions on adding multiple css classes to a React div.

However I can’t find anything explaining how to apply multiple classes when one class comes from a module and the other doesn’t.

My js component imports two stylesheets.

import styles from "./text-image-section.module.scss";
import "../../animate.scss";

I am trying to apply both classes to a div

<div className={`${styles.textContainer} .animate`}>
Tags:

2

Answers


  1. 0

    When accessing a module’s class, string interpolation is usable, as you’re importing it into a variable styles (as opposed to a plain string).

    However, when access a non-module class, you can just put the name of the class down.
    So, for your case, instead of putting
    <div className={`${styles.textContainer} .animate`}>// content...</div>,

    you can put
    <div className={`${styles.textContainer} animate`}>// content...</div>

    This is assuming "animate" is a class inside of "../../animate.css"

    Login or Signup to reply.
  2. 0

    You can import global classnames the same way you import scoped classnames.

    import styles from "./text-image-section.module.scss";
import global from "../../animate.scss";

<div className={`${styles.textContainer} ${global.animate}`} />

    resulting DOM

    <div class="__s323dhf123sa56f_textContainer animate"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search