Create-react-app: regular stylesheet and css modules stylesheet conflict with classnames package

[hbadri1]

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(R) Core(TM) 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]

The order css rules are applied is determined by the order that they're included. Are you importing your formControlStyles _after_ bootstrap/dist/css/bootstrap.css?

[hbadri1]

In fact formControlStyles is handled by CSS Modules of React and bootstrap.css is imported in index.js. So I see I don't have any control on the order. When I change the order in my component from const fieldClassName = classnames( 'form-control', formControlStyles.field ) to const fieldClassName = classnames( formControlStyles.field, 'form-control' ), I still get the same result.

[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.

[hbadri1]

@heyimalex Thanks a lot, you saved my day.
The import of CSS must be on top of index.js as you advised. Thanks again

[heyimalex]

No problem!