Using MDBootstrap with React CSS Modules


Topic: Using MDBootstrap with React CSS Modules

ccravenbartle asked 5 years ago

I want to use React CSS Modules within my application and want to combine the local CSS module classes with the global MDBootstrap CSS classes using the 'classnames' library as per this article: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

My understanding is that I need to import the global MDBootstrap CSS into my component to be able to reference the classes and combine them with my local classes. I am not sure which MDBootstrap files I need to import to get this to work.

Can you advise?


Jakub Chmura staff premium commented 5 years ago

Hi @ccravenbartle,

You need to import all MDBReact CSS files as we describe in our Getting started section to index.js.

Unfortunately, our CSS file must be imported globally, and it can not be scoped to the component, because this will be caused a lot of problems.

Also React-CSS-Modules causes problems with external libraries like Bootstrap and Fontawesome, but if you want to still use modular styling you must leave className attribute as it was before with global MDBReact styles, all modular and scoped styles needs to be written in styleName attribute.

Best, Kuba


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.0
  • Device: HP laptop
  • Browser: Chrome / Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags
css