Apply styling to a react component - MDB Grid


Topic: Apply styling to a react component - MDB Grid

Amar Mohammed asked 2 years ago

I am new to MD Bootstrap so please forgive me for the stupid question. I am trying to apply a responsive grid to my React component and I am using the below grid responsive class - https://mdbootstrap.com/docs/react/layout/grid-usage/.

The MDB website shows me the jsx which works fine but I am unable to get the styling to work. When I apply the styling in a css file it changes the styling in the whole application. I have tried to place the styling in a css module but I cant seem to get it to work.


Piotr Glejzer staff commented 2 years ago

https://mdbootstrap.com/docs/react/getting-started/quick-start/

did you use this tutorial about how to put css styles to your app?


Amar Mohammed commented 2 years ago

I did yes I did the npm install and applied the below to my app.css

"mdbreact": "^4.27.0",

import "@fortawesome/fontawesome-free/css/all.min.css"; import "bootstrap-css-only/css/bootstrap.min.css"; import "mdbreact/dist/css/mdb.css";


Piotr Glejzer staff commented 2 years ago

can you copy and paste your app.js file?


Amar Mohammed commented 2 years ago

Sure I will pop it in below. Just to make sure I understand when using a component from MDBootstrap I dont need to assign any separate css?

import React, { Component } from "react"; import "./App.css"; import "@fortawesome/fontawesome-free/css/all.min.css"; import "bootstrap-css-only/css/bootstrap.min.css"; import "mdbreact/dist/css/mdb.css"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import LogoComp from "./components/LogoComp/LogoComp"; import NavigationComp from "./components/NavigationComp/NavigationComp";

class App extends Component { render() { return ( ); } }

export default App;


Piotr Glejzer staff commented 2 years ago

Thanks. Can you put your CSS import to your index.js file before import App.js and test it?


Amar Mohammed commented 2 years ago

That doesn't seem to make a difference. Do you have a email address I can send some code to?


Piotr Glejzer staff commented 2 years ago

p.glejzer@mdbootstrap.com send there


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.27.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes