Topic: Css React dont work
eliascaceresy
asked 6 years ago
I have a project created with rails and react, I use webpacker, install mdbootstrap react version with ./bin/yarn add mdbreact which install it correctly, but when creating a navbar component, do not add any style to the component.
Somebody could help me
this is my package.json
{ "name": "mi_turno_sass", "private": true, "dependencies": { "@rails/webpacker": "3.5", "babel-preset-react": "^6.24.1", "mdbreact": "^4.9.0", "prop-types": "^15.6.2", "react": "^16.7.0", "react-dom": "^16.7.0", "react-router-dom": "^4.3.1", "webpacker-react": "^0.3.2" }, "devDependencies": { "webpack-dev-server": "2.11.2" } }
and this is my component
import React, { Component } from "react"; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBContainer, MDBIcon } from "mdbreact"; import { BrowserRouter as Router } from 'react-router-dom';
class NavbarPage extends Component { state = { collapseID: "" };
toggleCollapse = collapseID => () => this.setState(prevState => ({ collapseID: prevState.collapseID !== collapseID ? collapseID : "" }));
render() { return ( MDB Home Link Profile MDB Home Link Profile MDB Home Link Profile MDB Home Link Profile MDBNavbar Home Features Pricing MDBDropdown Action Another Action Something else here Something else here MDBNavbar Home Features Pricing MDBDropdown Action Another Action Something else here Something else here Action Another Action Something else here Something else here MDBNavbar Contact Settings Profile My account Log out MDBNavbar Home Features Pricing MDBDropdown Action Another Action Something else here Something else here
class NavbarPage extends Component { state = { collapseID: "" };
toggleCollapse = collapseID => () => this.setState(prevState => ({ collapseID: prevState.collapseID !== collapseID ? collapseID : "" }));
render() {
return (
MDB
Home
Link
Profile
MDB
Home
Link
Profile
MDB
Home
Link
Profile
MDB
Home
Link
Profile
MDBNavbar
Home
Features
Pricing
MDBDropdown
Action
Another Action
Something else here
Something else here
MDBNavbar
Home
Features
Pricing
MDBDropdown
Action
Another Action
Something else here
Something else here
Action
Another Action
Something else here
Something else here
MDBNavbar
Contact
Settings
Profile
My account
Log out
MDBNavbar
Home
Features
Pricing
MDBDropdown
Action
Another Action
Something else here
Something else here
1
My account
Log out
);
}
}
export default NavbarPage;
assName="waves-effect waves-light d-flex align-items-center" to="#!">1
My account
Log out
);
}
}
export default NavbarPage;
Anna Morawska
staff answered 6 years ago
Hi there,
we are happy to help, but please provide us with a working example. Your code snippet is nreadable in the current form.
Best,
Ania
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: Hp
- Browser: Chrome
- OS: Linux
- Provided sample code: No
- Provided link: No