score:1

the newest solution is to upgrade the react-script by using:

 npm upgrade --latest react-scripts

it supports the css module so you don't need to config anything. what need to do is add .module to the css file: from './mybutton.css' to './mybutton.module.css'. and change the import as well:

import styles from './mybutton.module.css';

using this, we don't need to perform

npm run eject 

any more.

score:5

@tehowner ...phew this question was a doozy. i think i accomplished what you were trying to do.

i created a sandbox that can be found here.

demo

basically, you need this npm module in your project to be able to assign multiple css classes to a react component using the classname property.

and setup your component with a structure that resembles the below

import react, { component } from 'react';
import { button } from 'reactstrap';
import cssmodules from 'react-css-modules';
import styles from './mydangerbutton.css';
import cn from 'classnames';

class mydangerbutton extends component {
  render() {
    const myfancydangerbutton = cn({
      btn: true,
      'btn-danger': true,
      mydangerbutton: true
    });

    return (
      <div>
        <h1>my fancy danger button!</h1>
        <button classname={myfancydangerbutton}>danger button</button>
      </div>
    );
  }
}

export default cssmodules(mydangerbutton, styles);

🍺 cheers chris


Related Query

More Query from same tag