javascript - How do I customize variables to prevent overwriting styles? -

i've been investigating alternative ways include bootstrap project , i'm not pleased solution. options:

1. react-bootstrap

just use components imported in jsx >> override styles of (yuck!)

2. bootstrap-loader (https://github.com/shakacode/bootstrap-loader)

parameterize styles write components in html (yuck!)

3. can have both?

how write bootstrap components in jsx basic bootstrap variables customized can avoid things such overwriting styles in basic bootstrap navbar?

react bootstrap not ship styles. have insert own styles. react bootstrap not dependent on jquery.

because react-bootstrap doesn't depend on precise version of bootstrap, don't ship included css. however, stylesheet required use these components. how , bootstrap styles include you, simplest way include latest styles cdn.

but don't have use prebuild version of styles (like download or cdn). can use customizer website or compile files less or sass. before compiling edit variables in variables file.

depending on setup can use loader files. webpack example:

// es5 require('less!./path/to/style.less');  // es2015 modules import 'less!./path/to/style.less'; 

or register loader in webpack config , can rid of less!prefix.

hope helps you, feel free ask.