Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

regular stylesheet and css modules stylesheet conflict with classnames package

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

heyimalexcommented, Apr 7, 2019

No problem!

heyimalexcommented, Apr 5, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS conflicts in react - Stack Overflow
Here error is your class name same as regular CSS. Now u may have same classname as error in another css file like...
Read more >
Using CSS modules in React - Bootcamp
To import a CSS Module into the corresponding component, import the css modules stylesheet as styles or [name]Styles :.
Read more >
How to solve the CSS globally scoped class naming conflict.
Please like, share and subscribe if you find the video useful. Checkout the Playlists: FrontEnd JavaScript Interview Questions: ...
Read more >
Goodbye CSS Modules, Hello TailwindCSS - Polytomic
Button.module.css' // Import regular stylesheet import '. ... The advantages of CSS Modules are the elimination of CSS conflicts across ...
Read more >
CSS Modules by Example - JavaScript Stuff
CSS Modules are a means to achieve locally scoped CSS class names.For a simple one-page app they may not be necessary. But if...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found