设置复杂的反应内联样式（例如悬停），激活反应组件（例如按钮）

我在CSS中有以下样式的按钮。我也在使用引导程序。

.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;
}

我已将按钮定义为react中的一个组件。

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

基于从服务器获取的一些值，我想更改按钮的完整颜色。

问题1：

如何将按钮的完整样式设置为嵌入式样式？

问题2：

另外，我可以使用scss诸如mixinsin之类的功能react来生成按钮样式，以动态地将颜色作为变量传递吗？

问题3：

我应该在js中使用CSS使用内联样式或类名吗？

对于诸如按钮之类的通用组件，我们应该使用可以在定义按钮的所有位置重用的全局类，还是应该使用本地内联样式并在所有位置创建内联样式？

var buttonStyle = { backgroundColor: "#229ac8", backgroundImage: "linear-gradient(to bottom, #23a1d1, #1f90bb)", backgroundRepeat: "repeat-x", borderColor: "#1f90bb #1f90bb #145e7a", color: "#ffffff", textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)" }