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中使用mixins之类的react功能来生成动态传递颜色作为变量的按钮样式吗？

问题3：

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

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

Answer 1

JS 中的CSS（具有伪类和MQ支持）

有lots of libs to write CSS with React支持伪类，但是所有这些都需要你在JS 中内联或编写你的CSS，我强烈推荐

CSS模块（正常编写CSS，但以更好的方式编写）

还有CSS modules，如果您已经在使用Webpack should be simple to set it up，那么您可以将import / require CSS作为对象使用它，就像这样使用它：< / p>

import styles from './Button.css'

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

解耦组件

我还补充说，您不应该将类传递给<Button />并处理组件内部的条件。例如使用classnames 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 Modules＆amp; classnames lib可以创建一些强大的组合。

Answer 2

就个人而言，我会使用全局CSS和wire it up with 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>

Answer 3

hover:与挂钩的使用：

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

对于更复杂的情况，您可以使用相同的技术。

Answer 4

您可以在按钮中设置带有内嵌样式的javascript对象，以动态更改颜色。例如：

const normalButtonStyle = {
  background:'gray',
  color:'black',
  borderColor:'white'
}
const buttonCompleteStyle = {
  background:'red',
  color:'white',
  borderColor:'black'
} // this can be included in from another file as a style object as well

const MyButton = ({children, status, onClick, classNames, ...rest }) =>
(
  <button
    onClick   = {onClick}
    className = {`${classNames}`}
    {...rest}
    style={status === 'complete' ? buttonCompleteStyle : normalButtonStyle}
  >
    {children}
  </button>
);

未经测试，但有类似的东西。看看Material UI是如何做到的。

Answer 5

问题1：

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

来自官方docs：

在React中，内联样式未指定为字符串。相反，它们使用一个对象来指定，该对象的键是样式名称的camelCased版本，其值是样式的值，通常是字符串

给出以下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);
}

它的内联样式表示将是

const MyButton = () =>
(
    <button
        className = { {
            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>
);

问题2

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

React的内联样式只是css的抽象。它没有其他奇特的功能。但是由于内联样式只是一个对象，它可以以一种可以模拟scss mixins的方式动态生成，当然，你也可以使用变量。

像这样的scss mixin

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

可以用

之类的东西来完成

const borderRadius = ($radius) => {
    return {
        WebkitBorderRadius: $radius;
        MozBorderRadius: $radius;
        MsBorderRadius: $radius;
        borderRadius: $radius;
    }
}

const MyComponent = () => {
    var inlineStyle = Object.assign({}, borderRadius(10), {
        backgroundColor: 'white'
    })

    return (
        <div style={ inlineStyle }>
            Hello, world!
        </div>
    )
}

问题3

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

从这一个你无法得到明确的答案。但我建议使用className作为特定的泛型和内联样式。由您决定如何管理代码以满足您的需求。

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

5 个答案:

JS 中的CSS（具有伪类和MQ支持）

CSS模块（正常编写CSS，但以更好的方式编写）

解耦组件