How to use jQuery to select a class name that's transformed by css-loader?

Question

I'm using webpack with css-loader. Everything has been working fine except that I don't know how to use jQuery to select a css-loader transformed class. The transformed class name looks something like this "src-styleauthTextboxLeft1Npf4" with the following css-loader configuration:

css?sourceMap&modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:5]'

Here's the React code

const Auth = (props) => {
  const toggle = (event) => {
    // Working example
    $('#container').css('background', 'blue');

    // Not working
    $(styleCSS.container).css('background', 'green');
  };
  return (
    <div id="container" className={styleCSS.container} onClick={toggle} />
  );
};

Is there anyway to make the make the second selection works?

Answer 1

If styleCSS.container is a class, you would just need to add a . in front of it. Try this:

$('.' + styleCSS.container).css('background', 'green');