web pack css-loader generated css class names with react-bootstrap

Question

I'm using css-loader for web pack, and the configuration looks like this:

loaders: [
{
   test: /\.css$/,
   loader: ExtractTextPlugin.extract('style-loader', 'css-loader?camelCase&modules')
}, ...]

And then in my jsx file I have something like this:

import styles from 'components/MyComponent/style.css'

export default class MyComponent extends React.Component {
    render() {
        return (
            return <div className={styles.myComponent}>
                <Media>
                    <Media.Left>
                    ...
                    </Media.Left>
                    <Media.Body> 
                    ...
                    </Media.Body>
                </Media>
            </div>
        )
    }
}

And in my components/MyComponent/style.css file I have something like:

.myComponent .media-left {
    vertical-align: middle;
}

And so my problem is, css-loader will generate random ids for both .myComponent and .media-left, which is seriously annoying. Because .media-left is a bootstrap class and I want it just left alone. Is there a way to make css-loader only generate an id for the top level css class?

Answer 1

So I figured this out. I need to use the global selector for every class that I want to remain global, something like this:

.myComponent :global(.media-left) {
    vertical-align: middle;
}