css modules react code example

Example 1: typescript css modules in react

npm install typescript-plugin-css-modules --save-dev

Or if you’re using Yarn, run:

yarn add -D typescript-plugin-css-modules


# Create a new file at the root of the project called styles.d.ts
# (or something similar), and add the following code to it:

// For CSS
declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

// For LESS
declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

// For SCSS
declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

Example 2: css modules react

import styles from './Component.module.css'
<Component className={styles.someClassInCssModule}/>

Example 3: react modules

import React, { Component } from 'react';class Button extends Component {  render() {    // ...  }}export default Button; // Don’t forget to use export default!Copy

Example 4: react modules

import React, { Component } from 'react';import Button from './Button'; // Import a component from another fileclass DangerButton extends Component {  render() {    return <Button color="red" />;  }}export default DangerButton;Copy