设置复杂反应内联样式,例如悬停,在按钮等反应组件上激活

Question

我的按钮在css中有以下样式.我也在使用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;
}

我已经将一个按钮定义为反应中的一个组件.

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

基于从服务器获取的某些值,我想更改按钮的完整颜色.

问题1:

如何将按钮的完整样式设置为内联样式？

问题2:

另外,我可以使用scss像mixinsin 这样的一些功能react来生成动态传递颜色作为变量的按钮样式吗？

问题3:

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

对于像按钮这样的通用组件,我们应该使用一个全局类,它可以在定义按钮的所有位置重用,或者使用本地内联样式并在所有位置创建内联样式？

Answer 1

JS中的CSS (具有伪类和MQ支持)

使用React编写CSS有很多lib支持伪类但是所有这些都需要你在JS中内联或编写你的CSS 我强烈推荐

CSS模块(正常写你的CSS,但以更好的方式)

还有CSS模块,如果你已经在使用Webpack应该很容易设置它,这让你import/ require你的CSS作为一个对象使用它像你的组件:

import styles from './Button.css'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {styles.primary}
        {...rest}
    >
        {children}
    </button>
);

解耦组件

我还要补充一点,你不应该将类传递给它<Button />并处理组件本身内部的条件.例如,使用类名 lib,您可以执行以下操作.

import classnames from 'classnames'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        {/* 
          depends on the type prop, you will get the relevent button 
          so no need for consumers to care about the internals of the component
        */}
        className = {classnames('.btn', { [`btn-${type}`]: true })}
        {...rest}
    >
        {children}
    </button>
);

您甚至可以组合CSS模块和classnameslib来创建一些强大的组合.

Answer 2

就个人而言,我会使用全局CSS并将其与Webpack连接起来.它将使您的React更清洁,当然更模块化和易于编辑.

据我所知,SCSS功能不能与您的React一起使用.

如果你需要在React中设置内联样式,就像这样做;

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)"
}

<button style={buttonStyle}>Button</button>