CSS Module styles example in React

There are different ways of adding styles to react components.
1. Inline styles.
2. CSS Stylesheet
3. CSS Modules

In this example we shall see on how to implement styles using a CSS Modules in React components. The example uses styles defined in a seperate .css file and imported into the react component file.


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld.jsx';
import styles from './CssStyles.css';

class CSSModuleStyleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
return (
  <div className={styles.myStyle}> 
   <span>Hello CSS Styles</span>
  </div>
);
  }
}

ReactDOM.render(<CSSModuleStyleComponent />, document.getElementById('app'));

CssStyles.css
.myStyle {
  height: 200px;
  width: 200px;
  margin: 20px;
  border: 2px dotted blue;

}