Search code examples
cssreactjsmodulestylesclassname

how Can I use css modules and global style together on React


i want to use normal class and module class together. if i use two className it says "JSX elements cannot have multiple attributes with the same name."

import Header from "./ProductHeader.module.css";
.
.
.
<div className="col-12" className={Header.title} ></div>

Solution

  • You can use it like

    <div className={`col-12 ${Header.title}`}"></div>
    

    This way you can string and variable together in any attribute

    You can also use it conditionally

    <div className={`col-12 ${someCondition ? Header.title : Header.subTitle}`}></div>