Using CSS Modules How to Define a Global Class

Using css modules how do I define a global class

According to the css modules docs, :global switches to the global scope for the current selector. e.g.
:global(.example-classname)

So this should work:

:global(.tweet) {
    text-align: left;
}
:global(.user) {
    text-align: left;
}

Or define a global block

:global {
    .tweet {
        text-align: left;
    }
    .user {
        text-align: left;
    }   
}

Reference global class names from within a css module

To refer to a globally declared class name inside :local scoped css modules you should use :global switch:

  .container {
    // rules for container
  }

  .container:global(.pull-right) {
    // rules for when the container element also has the pull-right class
  }

More detailed explanation in css-modules documentation.

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

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>

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

How to apply global styles with CSS modules in a react app?

Since you're using the ES6 import syntax you may use the same syntax to import your stylesheet

import './App.css'

Also, you can wrap your class with :global to switch to the global scope (this mean CSS Module won't modulify it, eg: adding a random id next to it)

:global(.myclass) {
  background-color: red;
}

How to override global CSS in a CSS module file?

Since .flex refers to a global class you'll need to use the :global selector to target it in your CSS module.

/* Layout.module.css */

.navbar :global(.flex) {
    justify-content: space-between;
}

Or using an alternate syntax.

.navbar {
    :global {
        .flex {
            justify-content: space-between;
        }
    }
}

How to use global variables in CSS-Modules?

One way could be to use dependencies. For example,

// variables.css
.primaryColor {
  color: #f1f1f1
}

// heading.css
.heading {
  composes: primaryColor from "./variables.css"
}

See more detailed information here: https://github.com/css-modules/css-modules#dependencies

If you're using webpack there are more examples here: https://github.com/webpack/css-loader#composing-css-classes

Also if you are using webpack you can still use Sass with CSS modules.

React global SCSS: class styling not working

Are you using css-modules?

In that case, css-modules adds a hash at the end of the class name. You can avoid it by switching to the global scope for your class.

:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
    padding: 100px;
  }
}

A better solution is to use the class name with the hash, by importing the stylesheet like this.

import styles from '../global-styles/main.scss';

And setting the class name like this.

<div className={styles.marginsContainer}>

---

Related Topics