DownloadReact CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a globally unique name. CSS Modules enable modular and reusable CSS! CSS Modules are awesome. If you are not familiar with CSS Modules, it is a concept of using a module bundler such as webpack 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 to be precise). To see CSS Modules in practice, webpack-demo. CSS Modules is a specification that can be implemented in multiple ways. react-css-modules leverages the existing CSS Modules implementation webpack css-loader. react-css-modules extends the 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.
Features
- Set up a module bundler to load the Interoperable CSS
- Decorate your component using react-css-modules
- Fewer style tags (older IE has a limit)
- Additional HTTP request
- Use styles property to overwrite the default component styles
- Decorated components inherit styles property that describes the mapping between CSS modules and CSS classes
Project Samples
