Adding CSS Modules

Poi supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]_[classname]__[hash].


Should you want to preprocess a stylesheet with Sass / Styles / Less then make sure to follow the installation instructions and then change the stylesheet file extension as follows: [name].module.scss [name].module.styl etc.

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules here.


.error {
  background-color: red;


.error {
  color: red;


import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;


No clashes from other .error class names:

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz"></div>
Last Updated: 9/17/2019, 6:04:51 PM