{"id":13394731,"url":"https://github.com/gajus/react-css-modules","last_synced_at":"2025-05-13T21:04:21.904Z","repository":{"id":46757519,"uuid":"41367342","full_name":"gajus/react-css-modules","owner":"gajus","description":"Seamless mapping of class names to CSS modules inside of React components.","archived":false,"fork":false,"pushed_at":"2019-11-02T09:55:04.000Z","size":329,"stargazers_count":5197,"open_issues_count":50,"forks_count":215,"subscribers_count":60,"default_branch":"master","last_synced_at":"2025-04-28T13:58:42.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gajus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gajus","patreon":"gajus"}},"created_at":"2015-08-25T14:15:22.000Z","updated_at":"2025-04-18T14:15:41.000Z","dependencies_parsed_at":"2022-09-26T18:00:42.634Z","dependency_job_id":null,"html_url":"https://github.com/gajus/react-css-modules","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gajus","download_url":"https://codeload.github.com/gajus/react-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254028363,"owners_count":22002240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:29.754Z","updated_at":"2025-05-13T21:04:21.876Z","avatar_url":"https://github.com/gajus.png","language":"JavaScript","readme":"# React CSS Modules\n\n[![GitSpo Mentions](https://gitspo.com/badges/mentions/gajus/react-css-modules?style=flat-square)](https://gitspo.com/mentions/gajus/react-css-modules)\n[![Travis build status](http://img.shields.io/travis/gajus/react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/react-css-modules)\n[![NPM version](http://img.shields.io/npm/v/react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/react-css-modules)\n[![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)\n\n\u003cimg src='./.README/react-css-modules.png' height='150' /\u003e\n\nReact CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global unique name. CSS Modules enable a modular and reusable CSS!\n\n\u003e ## ⚠️⚠️⚠️ DEPRECATION NOTICE ⚠️⚠️⚠️\n\u003e\n\u003e If you are considering to use `react-css-modules`, evaluate if [`babel-plugin-react-css-modules`](https://github.com/gajus/babel-plugin-react-css-modules) covers your use case.\n\u003e `babel-plugin-react-css-modules` is a lightweight alternative of `react-css-modules`.\n\u003e\n\u003e `babel-plugin-react-css-modules` is not a drop-in replacement and does not cover all the use cases of `react-css-modules`.\n\u003e However, it has a lot smaller performance overhead (0-10% vs +50%; see [Performance](https://github.com/gajus/babel-plugin-react-css-modules#performance)) and a lot smaller size footprint (less than 2kb vs +17kb).\n\u003e\n\u003e It is easy to get started! See the demo https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo\n\n- [CSS Modules](#css-modules)\n    - [webpack `css-loader`](#webpack-css-loader)\n- [What's the Problem?](#whats-the-problem)\n- [The Implementation](#the-implementation)\n- [Usage](#usage)\n    - [Module Bundler](#module-bundler)\n        - [webpack](#webpack)\n            - [Development](#development)\n            - [Production](#production)\n        - [Browserify](#browserify)\n    - [Extending Component Styles](#extending-component-styles)\n    - [`styles` Property](#styles-property)\n    - [Loops and Child Components](#loops-and-child-components)\n    - [Decorator](#decorator)\n    - [Options](#options)\n        - [`allowMultiple`](#allowmultiple)\n        - [`handleNotFoundStyleName`](#handlenotfoundstylename)\n- [SASS, SCSS, LESS and other CSS Preprocessors](#sass-scss-less-and-other-css-preprocessors)\n    - [Enable Sourcemaps](#enable-sourcemaps)\n- [Class Composition](#class-composition)\n    - [What Problems does Class Composition Solve?](#what-problems-does-class-composition-solve)\n    - [Class Composition Using CSS Preprocessors](#class-composition-using-css-preprocessors)\n- [Global CSS](#global-css)\n- [Multiple CSS Modules](#multiple-css-modules)\n\n## CSS Modules\n\n[CSS Modules](https://github.com/css-modules/css-modules) are awesome. If you are not familiar with CSS Modules, it is a concept of using a module bundler such as [webpack](http://webpack.github.io/docs/) to load CSS scoped to a particular document. CSS module loader will generate a unique name for each CSS class at the time of loading the CSS document ([Interoperable CSS](https://github.com/css-modules/icss) to be precise). To see CSS Modules in practice, [webpack-demo](https://css-modules.github.io/webpack-demo/).\n\nIn the context of React, CSS Modules look like this:\n\n```js\nimport React from 'react';\nimport styles from './table.css';\n\nexport default class Table extends React.Component {\n    render () {\n        return \u003cdiv className={styles.table}\u003e\n            \u003cdiv className={styles.row}\u003e\n                \u003cdiv className={styles.cell}\u003eA0\u003c/div\u003e\n                \u003cdiv className={styles.cell}\u003eB0\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e;\n    }\n}\n```\n\nRendering the component will produce a markup similar to:\n\n```js\n\u003cdiv class=\"table__table___32osj\"\u003e\n    \u003cdiv class=\"table__row___2w27N\"\u003e\n        \u003cdiv class=\"table__cell___1oVw5\"\u003eA0\u003c/div\u003e\n        \u003cdiv class=\"table__cell___1oVw5\"\u003eB0\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nand a corresponding CSS file that matches those CSS classes.\n\nAwesome!\n\n### webpack `css-loader`\n\n[CSS Modules](https://github.com/css-modules/css-modules) is a specification that can be implemented in multiple ways. `react-css-modules` leverages the existing CSS Modules implementation webpack [css-loader](https://github.com/webpack/css-loader#css-modules).\n\n## What's the Problem?\n\nwebpack [css-loader](https://github.com/webpack/css-loader#css-modules) itself has several disadvantages:\n\n* You have to use `camelCase` CSS class names.\n* You have to use `styles` object whenever constructing a `className`.\n* Mixing CSS Modules and global CSS classes is cumbersome.\n* Reference to an undefined CSS Module resolves to `undefined` without a warning.\n\nReact CSS Modules component automates loading of CSS Modules using `styleName` property, e.g.\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport styles from './table.css';\n\nclass Table extends React.Component {\n    render () {\n        return \u003cdiv styleName='table'\u003e\n            \u003cdiv styleName='row'\u003e\n                \u003cdiv styleName='cell'\u003eA0\u003c/div\u003e\n                \u003cdiv styleName='cell'\u003eB0\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e;\n    }\n}\n\nexport default CSSModules(Table, styles);\n```\n\nUsing `react-css-modules`:\n\n* You are not forced to use the `camelCase` naming convention.\n* You do not need to refer to the `styles` object every time you use a CSS Module.\n* There is clear distinction between global CSS and CSS Modules, e.g.\n\n```js\n\u003cdiv className='global-css' styleName='local-module'\u003e\u003c/div\u003e\n```\n\n* You are warned when `styleName` refers to an undefined CSS Module ([`handleNotFoundStyleName`](#handlenotfoundstylename) option).\n* You can enforce use of a single CSS module per `ReactElement` ([`allowMultiple`](#allowmultiple) option).\n\n## The Implementation\n\n`react-css-modules` extends `render` method of the target component. It will use the value of `styleName` to look for CSS Modules in the associated styles object and will append the matching unique CSS class names to the `ReactElement` `className` property value.\n\n[Awesome!](https://twitter.com/intent/retweet?tweet_id=636497036603428864)\n\n## Usage\n\nSetup consists of:\n\n* Setting up a [module bundler](#module-bundler) to load the [Interoperable CSS](https://github.com/css-modules/icss).\n* [Decorating](#decorator) your component using `react-css-modules`.\n\n### Module Bundler\n\n#### webpack\n\n##### Development\n\nIn development environment, you want to [Enable Sourcemaps](#enable-sourcemaps) and webpack [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement.html) (HMR). [`style-loader`](https://github.com/webpack/style-loader) already supports HMR. Therefore, Hot Module Replacement will work out of the box.\n\nSetup:\n\n* Install [`style-loader`](https://www.npmjs.com/package/style-loader).\n* Install [`css-loader`](https://www.npmjs.com/package/css-loader).\n* Setup `/\\.css$/` loader:\n\n```js\n{\n    test: /\\.css$/,\n    loaders: [\n        'style-loader?sourceMap',\n        'css-loader?modules\u0026importLoaders=1\u0026localIdentName=[path]___[name]__[local]___[hash:base64:5]'\n    ]\n}\n```\n\n##### Production\n\nIn production environment, you want to extract chunks of CSS into a single stylesheet file.\n\n\u003e Advantages:\n\u003e\n\u003e * Fewer style tags (older IE has a limit)\n\u003e * CSS SourceMap (with `devtool: \"source-map\"` and `css-loader?sourceMap`)\n\u003e * CSS requested in parallel\n\u003e * CSS cached separate\n\u003e * Faster runtime (less code and DOM operations)\n\u003e\n\u003e Caveats:\n\u003e\n\u003e * Additional HTTP request\n\u003e * Longer compilation time\n\u003e * More complex configuration\n\u003e * No runtime public path modification\n\u003e * No Hot Module Replacement\n\n– [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin)\n\nSetup:\n\n* Install [`style-loader`](https://www.npmjs.com/package/style-loader).\n* Install [`css-loader`](https://www.npmjs.com/package/css-loader).\n* Use [`extract-text-webpack-plugin`](https://www.npmjs.com/package/extract-text-webpack-plugin) to extract chunks of CSS into a single stylesheet.\n\n* Setup `/\\.css$/` loader:\n\n  * ExtractTextPlugin v1x:\n\n    ```js\n    {\n      test: /\\.css$/,\n      loader: ExtractTextPlugin.extract('style', 'css?modules\u0026importLoaders=1\u0026localIdentName=[name]__[local]___[hash:base64:5]')\n    }\n    ```\n\n  * ExtractTextPlugin v2x:\n\n    ```js\n    {\n      test: /\\.css$/,\n      use: ExtractTextPlugin.extract({\n          fallback: 'style-loader',\n          use: 'css-loader?modules,localIdentName=\"[name]-[local]-[hash:base64:6]\"'\n      }),\n    }\n    ```\n\n* Setup `extract-text-webpack-plugin` plugin:\n\n  * ExtractTextPlugin v1x:\n\n    ```js\n    new ExtractTextPlugin('app.css', {\n        allChunks: true\n    })\n    ```\n\n  * ExtractTextPlugin v2x:\n\n    ```js\n    new ExtractTextPlugin({\n      filename: 'app.css',\n      allChunks: true\n    })\n    ```\n\nRefer to [webpack-demo](https://github.com/css-modules/webpack-demo) or [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) for an example of a complete setup.\n\n##### Browserify\n\nRefer to [`css-modulesify`](https://github.com/css-modules/css-modulesify).\n\n### Extending Component Styles\n\nUse `styles` property to overwrite the default component styles.\n\nExplanation using `Table` component:\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport styles from './table.css';\n\nclass Table extends React.Component {\n    render () {\n        return \u003cdiv styleName='table'\u003e\n            \u003cdiv styleName='row'\u003e\n                \u003cdiv styleName='cell'\u003eA0\u003c/div\u003e\n                \u003cdiv styleName='cell'\u003eB0\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e;\n    }\n}\n\nexport default CSSModules(Table, styles);\n```\n\nIn this example, `CSSModules` is used to decorate `Table` component using `./table.css` CSS Modules. When `Table` component is rendered, it will use the properties of the `styles` object to construct `className` values.\n\nUsing `styles` property you can overwrite the default component `styles` object, e.g.\n\n```js\nimport customStyles from './table-custom-styles.css';\n\n\u003cTable styles={customStyles} /\u003e;\n```\n\n[Interoperable CSS](https://github.com/css-modules/icss) can [extend other ICSS](https://github.com/css-modules/css-modules#dependencies). Use this feature to extend default styles, e.g.\n\n```css\n/* table-custom-styles.css */\n.table {\n    composes: table from './table.css';\n}\n\n.row {\n    composes: row from './table.css';\n}\n\n/* .cell {\n    composes: cell from './table.css';\n} */\n\n.table {\n    width: 400px;\n}\n\n.cell {\n    float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;\n}\n```\n\nIn this example, `table-custom-styles.css` selectively extends `table.css` (the default styles of `Table` component).\n\nRefer to the [`UsingStylesProperty` example](https://github.com/gajus/react-css-modules-examples/tree/master/src/UsingStylesProperty) for an example of a working implementation.\n\n### `styles` Property\n\nDecorated components inherit `styles` property that describes the mapping between CSS modules and CSS classes.\n\n```js\nclass extends React.Component {\n    render () {\n        \u003cdiv\u003e\n            \u003cp styleName='foo'\u003e\u003c/p\u003e\n            \u003cp className={this.props.styles.foo}\u003e\u003c/p\u003e\n        \u003c/div\u003e;\n    }\n}\n```\n\nIn the above example, `styleName='foo'` and `className={this.props.styles.foo}` are equivalent.\n\n`styles` property is designed to enable component decoration of [Loops and Child Components](#loops-and-child-components).\n\n### Loops and Child Components\n\n`styleName` cannot be used to define styles of a `ReactElement` that will be generated by another component, e.g.\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport List from './List';\nimport styles from './table.css';\n\nclass CustomList extends React.Component {\n    render () {\n        let itemTemplate;\n\n        itemTemplate = (name) =\u003e {\n            return \u003cli styleName='item-template'\u003e{name}\u003c/li\u003e;\n        };\n\n        return \u003cList itemTemplate={itemTemplate} /\u003e;\n    }\n}\n\nexport default CSSModules(CustomList, styles);\n```\n\nThe above example will not work. `CSSModules` is used to decorate `CustomList` component. However, it is the `List` component that will render `itemTemplate`.\n\nFor that purpose, the decorated component inherits [`styles` property](#styles-property) that you can use just as a regular CSS Modules object. The earlier example can be therefore rewritten to:\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport List from './List';\nimport styles from './table.css';\n\nclass CustomList extends React.Component {\n    render () {\n        let itemTemplate;\n\n        itemTemplate = (name) =\u003e {\n            return \u003cli className={this.props.styles['item-template']}\u003e{name}\u003c/li\u003e;\n        };\n\n        return \u003cList itemTemplate={itemTemplate} /\u003e;\n    }\n}\n\nexport default CSSModules(CustomList, styles);\n```\n\nYou can use `styleName` property within the child component if you decorate the child component using `CSSModules` before passing it to the rendering component, e.g.\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport List from './List';\nimport styles from './table.css';\n\nclass CustomList extends React.Component {\n    render () {\n        let itemTemplate;\n\n        itemTemplate = (name) =\u003e {\n            return \u003cli styleName='item-template'\u003e{name}\u003c/li\u003e;\n        };\n\n        itemTemplate = CSSModules(itemTemplate, this.props.styles);\n\n        return \u003cList itemTemplate={itemTemplate} /\u003e;\n    }\n}\n\nexport default CSSModules(CustomList, styles);\n```\n\n### Decorator\n\n```js\n/**\n * @typedef CSSModules~Options\n * @see {@link https://github.com/gajus/react-css-modules#options}\n * @property {Boolean} allowMultiple\n * @property {String} handleNotFoundStyleName\n */\n\n/**\n * @param {Function} Component\n * @param {Object} defaultStyles CSS Modules class map.\n * @param {CSSModules~Options} options\n * @return {Function}\n */\n```\n\nYou need to decorate your component using `react-css-modules`, e.g.\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport styles from './table.css';\n\nclass Table extends React.Component {\n    render () {\n        return \u003cdiv styleName='table'\u003e\n            \u003cdiv styleName='row'\u003e\n                \u003cdiv styleName='cell'\u003eA0\u003c/div\u003e\n                \u003cdiv styleName='cell'\u003eB0\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e;\n    }\n}\n\nexport default CSSModules(Table, styles);\n```\n\nThats it!\n\nAs the name implies, `react-css-modules` is compatible with the [ES7 decorators](https://github.com/wycats/javascript-decorators) syntax:\n\n```js\nimport React from 'react';\nimport CSSModules from 'react-css-modules';\nimport styles from './table.css';\n\n@CSSModules(styles)\nexport default class extends React.Component {\n    render () {\n        return \u003cdiv styleName='table'\u003e\n            \u003cdiv styleName='row'\u003e\n                \u003cdiv styleName='cell'\u003eA0\u003c/div\u003e\n                \u003cdiv styleName='cell'\u003eB0\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e;\n    }\n}\n```\n\n[Awesome!](https://twitter.com/intent/retweet?tweet_id=636497036603428864)\n\nRefer to the [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) repository for an example of webpack setup.\n\n### Options\n\nOptions are supplied as the third parameter to the `CSSModules` function.\n\n```js\nCSSModules(Component, styles, options);\n```\n\nor as a second parameter to the decorator:\n\n```js\n@CSSModules(styles, options);\n```\n\n#### `allowMultiple`\n\nDefault: `false`.\n\nAllows multiple CSS Module names.\n\nWhen `false`, the following will cause an error:\n\n```js\n\u003cdiv styleName='foo bar' /\u003e\n```\n\n#### `handleNotFoundStyleName`\n\nDefault: `throw`.\n\nDefines the desired action when `styleName` cannot be mapped to an existing CSS Module.\n\nAvailable options:\n\n* `throw` throws an error\n* `log` logs a warning using `console.warn`\n* `ignore` silently ignores the missing style name\n\n## SASS, SCSS, LESS and other CSS Preprocessors\n\n[Interoperable CSS](https://github.com/css-modules/icss) is compatible with the CSS preprocessors. To use a preprocessor, all you need to do is add the preprocessor to the chain of loaders, e.g. in the case of webpack it is as simple as installing `sass-loader` and adding `!sass` to the end of the `style-loader` loader query (loaders are processed from right to left):\n\n```js\n{\n    test: /\\.scss$/,\n    loaders: [\n        'style',\n        'css?modules\u0026importLoaders=1\u0026localIdentName=[path]___[name]__[local]___[hash:base64:5]',\n        'resolve-url',\n        'sass'\n    ]\n}\n```\n\n### Enable Sourcemaps\n\nTo enable CSS Source maps, add `sourceMap` parameter to the css-loader and to the `sass-loader`:\n\n```js\n{\n    test: /\\.scss$/,\n    loaders: [\n        'style?sourceMap',\n        'css?modules\u0026importLoaders=1\u0026localIdentName=[path]___[name]__[local]___[hash:base64:5]',\n        'resolve-url',\n        'sass?sourceMap'\n    ]\n}\n```\n\n## Class Composition\n\nCSS Modules promote composition pattern, i.e. every CSS Module that is used in a component should define all properties required to describe an element, e.g.\n\n```css\n.box {\n    width: 100px;\n    height: 100px;\n}\n\n.empty {\n    composes: box;\n\n    background: #4CAF50;\n}\n\n.full {\n    composes: box;\n\n    background: #F44336;\n}\n```\n\nComposition promotes better separation of markup and style using semantics that would be hard to achieve without CSS Modules.\n\nBecause CSS Module names are local, it is perfectly fine to use generic style names such as \"empty\" or \"full\", without \"box-\" prefix.\n\nTo learn more about composing CSS rules, I suggest reading Glen Maddern article about [CSS Modules](http://glenmaddern.com/articles/css-modules) and the official [spec of the CSS Modules](https://github.com/css-modules/css-modules).\n\n### What Problems does Class Composition Solve?\n\nConsider the same example in CSS and HTML:\n\n```css\n.box {\n    width: 100px;\n    height: 100px;\n}\n\n.box-empty {\n    background: #4CAF50;\n}\n\n.box-full {\n    background: #F44336;\n}\n```\n\n```html\n\u003cdiv class='box box-empty'\u003e\u003c/div\u003e\n```\n\nThis pattern emerged with the advent of OOCSS. The biggest disadvantage of this implementation is that you will need to change HTML almost every time you want to change the style.\n\n### Class Composition Using CSS Preprocessors\n\nThis section of the document is included as a learning exercise to broaden the understanding about the origin of Class Composition. CSS Modules support a native method of composing CSS Modules using [`composes`](https://github.com/css-modules/css-modules#composition) keyword. CSS Preprocessor is not required.\n\nYou can write compositions in SCSS using [`@extend`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend) keyword and using [Mixin Directives](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), e.g.\n\nUsing `@extend`:\n\n```css\n%box {\n    width: 100px;\n    height: 100px;\n}\n\n.box-empty {\n    @extend %box;\n\n    background: #4CAF50;\n}\n\n.box-full {\n    @extend %box;\n\n    background: #F44336;\n}\n```\n\nThis translates to:\n\n```css\n.box-empty,\n.box-full {\n    width: 100px;\n    height: 100px;\n}\n\n.box-empty {\n    background: #4CAF50;\n}\n\n.box-full {\n    background: #F44336;\n}\n```\n\nUsing mixins:\n\n```css\n@mixin box {\n    width: 100px;\n    height: 100px;\n}\n\n.box-empty {\n    @include box;\n\n    background: #4CAF50;\n}\n\n.box-full {\n    @include box;\n\n    background: #F44336;\n}\n```\n\nThis translates to:\n\n```css\n.box-empty {\n    width: 100px;\n    height: 100px;\n    background: #4CAF50;\n}\n\n.box-full {\n    width: 100px;\n    height: 100px;\n    background: #F44336;\n}\n```\n\n## Global CSS\n\nCSS Modules does not restrict you from using global CSS.\n\n```css\n:global .foo {\n\n}\n```\n\nHowever, use global CSS with caution. With CSS Modules, there are only a handful of valid use cases for global CSS (e.g. [normalization](https://github.com/necolas/normalize.css/)).\n\n## Multiple CSS Modules\n\nAvoid using multiple CSS Modules to describe a single element. Read about [Class Composition](#class-composition).\n\nThat said, if you require to use multiple CSS Modules to describe an element, enable the [`allowMultiple`](#allowmultiple) option. When multiple CSS Modules are used to describe an element, `react-css-modules` will append a unique class name for every CSS Module it matches in the `styleName` declaration, e.g.\n\n```css\n.button {\n\n}\n\n.active {\n\n}\n```\n\n```js\n\u003cdiv styleName='button active'\u003e\u003c/div\u003e\n```\n\nThis will map both [Interoperable CSS](https://github.com/css-modules/icss) CSS classes to the target element.\n","funding_links":["https://github.com/sponsors/gajus","https://patreon.com/gajus"],"categories":["JavaScript","Uncategorized","Code Design"],"sub_categories":["Uncategorized","CSS / Style"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Freact-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgajus%2Freact-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Freact-css-modules/lists"}