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

Question

I have the following styles in css for my buttons. I am also 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 a button as a component in react.

const MyButton = ({children, onClick, classNames, ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {`${classNames}`}
        {...rest}
    >
        {children}
    </button>
);

Based on some value fetched from the server I want to change the complete color of the button.

Question 1:

How can I set the button's complete style as inline style?

Question 2:

Also, can I use some scss features like mixins in react to generate button styles dynamically passing color as variable ?

Question 3:

Should I use inline styles or classnames using css in js?

For a generic component such as a button should we use a global class which can be reused in all places where button is defined or use a local inline style and create inline styles in all places?

question from:https://stackoverflow.com/questions/38699039/setting-complex-react-inline-styles-such-as-hover-active-on-react-components-su