javascript - 设计 React 组件样式的最佳实践

Question

我已经使用 React 一段时间了，但我似乎找不到一种很好的方式来设计 React 组件的样式。

你可以做到的一种方法是使用内联样式，但你无法访问像 :after 和 :hover 这样的伪元素，这需要你处理所有使用 javascript 的“事件”(非常多余，因为您可以使用 css 执行此操作)。

解决此问题的另一种方法是使用 style-loader，但如果您想更新 UI，则需要更改类...(我认为这感觉不太“自然”)。

或者您可以采用混合方法，使用 style-loader 进行布局和静态样式设置，然后对需要更改的部分使用内联样式。 (感觉也不对，因为您的样式有两个不同的位置)。

我更倾向于使用内联样式，这确实需要一些额外的 javascript，您可以通过添加真正的 div 来解决 :after 元素。

这样做的最佳方法是什么？

Answer 1

最好的方法是将 Radium 用于伪元素或媒体查询

class Button extends React.Component {
  render() {
    return (
      <button
        style={{styles}}>
        {this.props.children}
      </button>
    );
  }
}

Button = Radium(Button);


const styles = {
    backgroundColor: red,
    ':hover': {
        backgroundColor: black
    }
};