javascript - Setting Complex react inline styles such as hover, active on react components such as button -

i have following styles in css buttons. using bootstrap.

.btn-primary {     background-color: #229ac8;     background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);     background-repeat: repeat-x;     border-color: #1f90bb #1f90bb #145e7a;     color: #ffffff;     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {     background-color: #1f90bb;     background-position: 0 -15px; } 

i have defined button component in react.

const mybutton = ({children, onclick, classnames, ...rest }) => (     <button         onclick   = {onclick}         classname = {`${classnames}`}         {...rest}     >         {children}     </button> ); 

based on value fetched server want change complete color of button.

question 1:

how can set button's complete style inline style?

question 2:

also, can use scss features mixins in react generate button styles dynamically passing color variable ?

question 3:

should use inline styles or classnames using css in js?

for generic component such button should use global class can reused in places button defined or use local inline style , create inline styles in places?

css in js (with pseudo classes & mq support)

there lots of libs write css react supports pseudo classes all, if not of them requires inline or write css in js which highly recommend

css modules (write css normal, in better way)

there css modules if using webpack should simple set up, let import/require css object use component so:

import styles './button.css'  const mybutton = ({children, onclick, type='primary', ...rest }) => (     <button         onclick   = {onclick}         classname = {styles.primary}         {...rest}     >         {children}     </button> ); 

decoupling components

i'd add shouldn't pass classes <button /> , deal conditions inside component itself. example using classnames lib can following.

import classnames 'classnames'  const mybutton = ({children, onclick, type='primary', ...rest }) => (     <button         onclick   = {onclick}         {/*            depends on type prop, relevent button            no need consumers care internals of component         */}         classname = {classnames('.btn', { [`btn-${type}`]: true })}         {...rest}     >         {children}     </button> ); 

you can combine css modules & classnames lib create powerful combinations.