Currently, I am working on a React project where I need to customize CSS classes from frameworks like bootstrap. An example is when I want to modify the background color of a specific class (https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99).
I'm using babel-plugin-react-css-modules and I face the challenge of only being able to apply my own CSS classes or the ones from AdminLTE:
import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';
export default class Foo extends React.Component {
render () {
return <div styleName='foo.main-footer'>Hello World</div>;
or
return <div styleName='bootstrap.main-footer'>Hello World</div>;
}
}
In our project, we are leveraging webpack (v4.41.0), babel (v7.6.2), and react (16.10.1). The babel plugin we are using, babel-plugin-react-css-modules, relies on css modules for managing CSS styles.
How can I achieve this in a modern and up-to-date way?