# gajus/react-css-modules

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/gajus-react-css-modules).**

5,170 stars · 213 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/gajus/react-css-modules
- awesome-repositories: https://awesome-repositories.com/repository/gajus-react-css-modules.md

## Description

This project is a utility and integration layer for mapping scoped CSS module identifiers to React components. It functions as a wrapper and style manager that translates class names into unique local identifiers to prevent style leakage across an application.

The system includes a composition tool for merging multiple CSS module identifiers on single elements and an integration layer that connects SASS, SCSS, and LESS preprocessed style maps to component markup.

It covers component styling through encapsulated style mapping and the distribution of styles to child elements. The library also supports the extension of default style mappings to customize the visual appearance of components.

## Tags

### User Interface & Experience

- [CSS Modules](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/css-modules.md) — Connects locally scoped CSS module identifiers to React components to prevent style leakage.
- [Class Name Compositions](https://awesome-repositories.com/f/user-interface-experience/class-name-compositions.md) — Provides utilities to merge multiple CSS module class names on a single element.
- [Component Style Customizations](https://awesome-repositories.com/f/user-interface-experience/component-style-customizations.md) — Allows overriding or extending default component styles to customize the visual appearance of UI elements.
- [CSS Module Resolvers](https://awesome-repositories.com/f/user-interface-experience/css-module-resolvers.md) — Maps scoped CSS module class names to elements within React components.
- [Composition Utilities](https://awesome-repositories.com/f/user-interface-experience/css-module-resolvers/composition-utilities.md) — Ships a mechanism for merging multiple CSS module identifiers and overriding default styles on elements.
- [Scoped CSS Modules](https://awesome-repositories.com/f/user-interface-experience/scoped-css-modules.md) — Translates CSS module class names into unique identifiers to prevent style leakage across components. ([source](https://github.com/gajus/react-css-modules#readme))
- [Style Encapsulations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-encapsulations.md) — Assigns specific styles to individual components to ensure visual properties remain private. ([source](https://github.com/gajus/react-css-modules/search))
- [Style Resolution Mapping](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-resolution-mapping.md) — Connects style maps to components so that class names in markup resolve to locally scoped identifiers. ([source](https://github.com/gajus/react-css-modules/blob/master/README.md))
- [Identifier Composition](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/css-modules/identifier-composition.md) — Enables merging multiple CSS module identifiers on a single element to combine style rules. ([source](https://github.com/gajus/react-css-modules#readme))
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Generates unique class names to isolate styles to specific components and prevent conflicts.
- [Component Style Overrides](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/component-style-overrides.md) — Allows users to overwrite or expand default style mappings to customize component appearance. ([source](https://github.com/gajus/react-css-modules#readme))
- [CSS Preprocessor Integrations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations/css-in-js-compilers/css-preprocessor-integrations.md) — Integrates SASS, SCSS, and LESS preprocessors into the component styling workflow via a loader chain.
- [Style Distribution Mechanisms](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-distribution-mechanisms.md) — Provides a mechanism to transfer style mappings to nested elements or loop-generated components. ([source](https://github.com/gajus/react-css-modules#readme))

### Part of an Awesome List

- [CSS in JS Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/css-in-js-libraries.md) — CSS Modules integration for React components.