Topic: How do I add my custom style sheet to my React project to override MDB styles?

mrrharris priority asked 8 months ago


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";


Krzysztof Wilk staff answered 8 months ago


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 :)

  1. You can try to move your index.css file before the MDB one
  2. To override MDB styles you can take advantage of CSS Cascade - use more precise selectors (i.e. p.some-class > div#some-id instead of .some-class > #some-id and an exclamation mark to break the cascade
  3. 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/scss catalog and theming utils. You can read more here: https://mdbootstrap.com/docs/b5/react/content-styles/theme/ :)

Keep coding!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Priority
  • 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