Topic: Apply styling to a react component - MDB Grid
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: 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
Piotr Glejzer staff commented 3 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 free commented 3 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 3 years ago
can you copy and paste your app.js file?
Amar Mohammed free commented 3 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 3 years ago
Thanks. Can you put your CSS import to your index.js file before import App.js and test it?
Amar Mohammed free commented 3 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 3 years ago
p.glejzer@mdbootstrap.com send there