Reactjs Module CSS multiple class selector

Active3 hr before
Viewed126 times

8 Answers


When using CSS modules, it creates a unique classname for each class for each instance of the component.,So you need to use the imported classes to have access to the generated classnames, just like you do for the .Content,In React you need to use the keyword 'className' instead of 'class'


<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>
load more v

Search Answer Titles

 Pretag team - issue, fix, solve, resolve

I'm aware I could just add the style, however my example is very oversimplified and the reason I'm asking is to try and implement it with an existing module (react-split-pane) as I'm current having to use global styles for that.,Hi @alexemorris , can you explain more what do you want to achieve? You could also remove redundant CSS (for example, those flex css) in your example, and provide more related component (for example, activePane or tabs. Without knowing their structure, it is hard to tell anything for sure),In fact, this makes using CSS Modules very easy and flexible and powerful in the long run

    return (
      <div className={styles.appTab} ><p>Color should be light grey</p></div>
      <div className={`${styles.appTab} active`} /><p>Color should be black</p></div>
load more v

One class in your CSS Module remains one class in the generated CSS & JS. Writing rules that combine multiple classes doesn't change that.,CSS Modules rewrite class names, but they don't touch tag names.,All you have to do is write .button {...} in your CSS Module, and reference the class with styles.button in your component.

.button {
   border - radius: 4 px;
   background - color: LightCyan;
load more v

If you just want to apply multiple classes to some element and this class set never changes, there’s no need to complicate things:,Last, but not least, it joins all classes using a space as separator. The function returns the resulting string.,Defining multiple CSS classes statically in JSX is identical to how it’s done in pure HTML

If you just want to apply multiple classes to some element and this class set never changes, there’s no need to complicate things:

const App = () => (
<button className="btn btn--large btn--main" />
load more v

Apply multiple classes like so:,First, let’s install classnames. With npm:,Then, import it into the component where you want to use multiple classnames. When importing it, I like to call it cx instead of classnames since it’s less verbose.

First, let’s install classnames. With npm:

npm install classnames--save

Or if you’re using yarn:

yarn add classnames
load more v

This week I have been working to implement CSS Modules in my React app at work. I wanted a more declarative approach to CSS that also had the benefit of not loading CSS that I am not using. CSS Modules allow you to access CSS via object dot notation and scope the CSS locally by default. Here is an example of CSS Modules:,note: an ah-hah moment is when you finally discover the answer to a problem and you say “ah hah!”, also known as a eureka moment.,One of the first problems I ran into immediately was writing elements with multiple class names. Say I have a button component with the classes of btn btn-info disabled. This wouldn’t work:

.container {
   max - width: 1200 px;
   width: 100 % ;
   margin: auto;

.cards {
   display: flex;
   justify - content: space - around;

.card {
   width: 25 % ;

.card__title {
   font - weight: bold;

.card__body {
   text - align: center;
load more v

Can I use a modular class and a global class on the same element and apply a combination CSS selector?,This is second installment of a two-part series on CSS modules. Check out the first installment here.,Can I use a modular class and a global class on the same element?

Well, this question has a simple answer. You can just write the below syntax to
add 2 class names.

< ​button​​ className​ = {
   `${​ styles​.submitButton​} ${​styles​.outlinedButton​}`
load more v

Other "class-module" queries related to "Reactjs Module CSS multiple class selector"