# 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].

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

# Button.module.css

.error {
  background-color: red;
}

# another-stylesheet.css

.error {
  color: red;
}

# Button.js

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>;
  }
}

# Result

No clashes from other .error class names:

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz"></div>