I just began my web app in order to learn React.Js and I was wondering, based on the many examples I saw in the internet, if it is better to use react-bootstrap components or use pure HTML?
Like for the NavBar, should I use import { NavBar } from 'react-bootstrap'; and use the component or use pure html such as <div class="navbar"><div/>. It's just that if I wanna personalize the design of it, like the CSS, how does it works with react?
Thank you for your time
The thing is that there is no single way of styling components in react.
If you'd like to go with the simpliest solution you could just have you good old style.css file having all styles you need. Include it in your index.html and you are done.
Other ways would include css-modules, js styling libraries like aphrodite or iridium, solutions like jss, or solutions like styled-components.
In developing my personal project I've gone through all possible ways of stylings (except for jss), starting with keeping a separate scss project just for styling, than css modules, then aphrodite, and ended up with styled-components, which I found to be most practical and easy to work with due to good IDE support (webstorm in my case).
Provided you decided to try out styled-components way of.. styling components, this is how you would create a custom styled navbar:
import styled from 'styled-components';
import { NavBar } from 'react-bootstrap';
export const MyNavBar = styled(NavBar)`
background-color: red;
`;
// somewhere...
<MyNavBar />
For this to work the NavBar component should accept className prop, which I suppose it does. Maybe you'll have to add !important, depending on the situation.
