样式化反应组件的最佳实践答案

【问题标题】：best practice to style react components样式化反应组件的最佳实践
【发布时间】：2018-12-13 07:05:28
【问题描述】：

我使用 React 已经有一段时间了，但我似乎无法找到一种设置 React 组件样式的好方法。

您可以做到的一种方法是使用内联样式，但您无法访问像 :after 和 :hover 这样的伪元素，这需要您使用 javascript 处理所有“事件”（相当多余，因为您可以用 css 做这个）。

您可以解决此问题的另一种方法是使用样式加载器，但如果您想更新 UI，这将需要您更改类...（在我看来，这感觉不太“自然”）。

或者也许您可以采用混合方法并使用样式加载器进行布局和静态样式，然后对需要更改的部分使用内联样式。（感觉也不对，因为你有两个不同的地方来进行造型）。

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

最好的方法是什么？

【问题讨论】：

我建议使用emotion，它允许您在具有完整功能范围的 CSS 的 JS 中创建样式化组件
看看Radium，很享受并且支持伪选择器:)

标签： javascript html css reactjs

【解决方案1】：

设置 React 样式的一种好方法是使用 styled components

【讨论】：

【解决方案2】：

最好的方法是使用 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
    }
};

【讨论】：