Topic: How do I add my custom style sheet to my React project to override MDB styles?
Expected behavior*I need to override the MDB style sheet with my custom style sheet to apply,y my designs to my project*Actual behavior*My React MDB project is not reading my custom style sheet after the mdb.css default style sheet.*Resources (screenshots, code snippets etc.)
import React from "react";import ReactDOM from "react-dom";import { BrowserRouter } from "react-router-dom";import "./components/scss/style.scss";import "./index.css";import App from "./App";
Hi!
The mdb.min.css file is a bundled stylesheet, so I'm afraid you can't override it directly. Anyway - there are some things you can do to achieve that :)
- You can try to move your
index.cssfile before the MDB one - To override MDB styles you can take advantage of CSS Cascade - use more precise selectors (i.e.
p.some-class > div#some-idinstead of.some-class > #some-idand an exclamation mark to break the cascade - If there are more than some changes you want to provide - you can use our SCSS files provided in the
/mdb-react-ui-kit/dist/scsscatalog and theming utils. You can read more here: https://mdbootstrap.com/docs/b5/react/content-styles/theme/ :)
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 2.4.0
- Device: MacBook Pro
- Browser: Chrome
- OS: 12.2.1 Monterey
- Provided sample code: No
- Provided link: No