React+Sass+Webpack local styling issue

Question

I'm using a using a 3rd party react component, and I'm having trouble configuring my sass correctly. This component creates a series of <li> html tags, and if one of the <li> has been clicked on it adds gives that item an "active" class name: <li class="active">. I would like to customize the css for that active <li> element. To do this, I created a Test.scss file containing the following:

.tag_input li.active {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

To use this styling, I do the following react

import classes from './Test.scss'
export const Test = (props) => {
  return (
    <ReactTags
        classNames={{
            tags: classes.tag_input,
        }}
     ... 
    >
  )
}

The problem is that when Webpack loads this Sass file, it uses css-loader, which converts each classname in each local .sass file to the following format: "localIdentName=[name]_[local]__[hash:base64:5]". That means my css no longer applies to a <li class="active">. Instead it now works for <li classname="Test__active___2LBGS">. I've thought of two (bad) solutions so far:

1. I somehow reconfigure webpack to not rename certain css class names using the localIdentName
2. I somehow get <ReactTags /> to use the classname: Test__active___2LBGS

Neither of these seem feasible so I'm pretty stuck!! Any help is much appreciated.

Answer 1

As stated in the css-loader documentation under Local scope you can apply :global to styles, that you don't want the loader to convert:

:global (.tag_input li.active) {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}