css - react 伪选择器内联样式

Question

您认为使用 React 内联样式处理伪选择器样式的好方法是什么？有什么好处和坏处？

假设每个 React 组件都有一个 styles.js 文件。您使用该样式文件为您的组件设置样式。但是你想在按钮(或其他)上做一个悬停效果。

一种方法是拥有一个全局 CSS 文件并以这种方式处理伪选择器的样式。这里，“label-hover”类来自全局 CSS 文件，而 styles.label 来自组件样式文件。

<ControlLabel style={styles.label} className='label-hover'>
    Email
</ControlLabel>

另一种方法是根据特定条件(可能由状态或其他原因触发)来设置组件的样式。在这里，如果悬停状态为真，则使用 styles.button 和 styles.buttonHover 否则只使用 styles.button。

<section 
  style={(hovered !== true) ?
     {styles.button} : 
     {...styles.button, ...styles.buttonHover }>
</section>

这两种方法都感觉有点老套。如果有人有更好的方法，我很想知道。谢谢!

Answer 1

我对任何想要使用 React 进行内联样式设置的人的建议是使用 Radium

支持:hover, :focus and :active pseudo-selectors用最少的努力

import Radium from 'radium'

const style = {
  color: '#000000',
  ':hover': {
    color: '#ffffff'
  }
};

const MyComponent = () => {
  return (
    <section style={style}>
    </section>
  );
};

const MyStyledComponent = Radium(MyComponent);

---

2018 年 4 月 3 日更新

这最近得到了一些赞成票，所以我觉得我应该更新它，因为我已经停止使用 Radium。我并不是说 Radium 仍然不适合做伪选择器，只是它不是唯一的选择。

自Radium问世以来，出现了大量值得考虑的css-in-js库。我目前选择的是 emotion ，但我鼓励您尝试一些，然后找到最适合您的。

• emotion - 👩‍🎤 下一代 CSS-in-JS
• fela - JavaScript 中的通用、动态和高性能样式
• styled-jss - JSS 之上的样式化组件
• react-jss - React 的 JSS 集成
• jss - JSS 是一种使用 JavaScript 作为宿主语言的 CSS 创作工具
• rockey - 使用 JS 的组件的无压力 CSS。使用功能混合编写基于组件的 CSS。
• styled-components - JavaScript 中的通用、动态和高性能样式
• aphrodite - 这是内联样式，但它们有效!还支持通过 CSS 设置样式
• csx - ϟ 功能性 UI 组件中功能性 CSS 的 CSS-in-JS 解决方案
• styled-jsx - 对 JSX 的完整 CSS 支持，没有任何妥协
• glam - 在你的 js 中疯狂的好 css
• glamor - 在你的 javascript 中使用 CSS
• glamorous - React 组件样式通过优雅的 API、小占用空间和出色的性能(通过魅力)解决
• styletron - ⚡️ 通用、高性能的 JavaScript 样式
• radium - 用于管理 React 元素上的内联样式的工具集。
• aesthetic - Aesthetic 是一个功能强大的 React 库，用于设置组件样式，无论是使用对象的 CSS-in-JS、导入样式表，还是简单地引用外部类名。
• j2c - JS 库中的 CSS，小巧但功能强大

( Source )