regular stylesheet and css modules stylesheet conflict with classnames package

Is this a bug report?

I’m not sure.

Did you try recovering your dependencies?

Yes, everything works fine

Which terms did you search for in User Guide?

Environment

Environment Info:

System: OS: Windows 10 CPU: x64 Intel® Core™ i5-3570 CPU @ 3.40GHz Binaries: npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 42.17134.1.0 Internet Explorer: 11.0.17134.1 npmPackages: react: ^16.8.6 => 16.8.6 react-dom: ^16.8.6 => 16.8.6 (15.6.2) react-scripts: 2.1.8 => 2.1.8 npmGlobalPackages: create-react-app: Not Found

Steps to Reproduce

Nothing special

Expected Behavior

css modules stylesheet should be applied over regular stylesheet (from bootstrap)

Actual Behavior

I want to apply this classnames object my input, in react 16 project without webpack tool.

const fieldClassName = classnames( formControlStyles.field, 'form-control' )

The form-control class is from bootstrap as you may notice.

And .field class is my class to override some attributes.

Please find below that form-control is overriding the .field class and I want the opposite to happen.

In form-control, font-size = 22px and in field class I have 34px. Unless I add !important to my field class, the font-size remains 22px. I want a solution other than !important because of big changes impacts.

[heyimalex]

No problem!

[heyimalex]

Even if you import it in index.js, if you import it after you import your other files which transitively import your css modules, it will still be included after. Try moving the bootstrap import to the very top of your index and tell me what happens? Alternatively could you make a codesandbox that repros? I tried yesterday and couldn’t.

The order that they’re specified in className shouldn’t matter.