Yinan Fang Yinan Fang - 15 days ago 5
CSS Question

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

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

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

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