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 -Stressless CSS 用于使用 JS 的组件。使用函数式 mixins 编写基于组件的 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、占用空间小和出色的性能（通过 glamor）
• styletron - ⚡️ 通用、高性能的 JavaScript 样式
• radium - 一组用于管理 React 元素的内联样式的工具。
• aesthetic - Aesthetic 是一个强大的 React 库，用于设置组件样式，无论是使用对象的 CSS-in-JS、导入样式表还是简单地引用外部类名。
• j2c - JS 库中的 CSS，小巧但功能丰富

(Source)

Answer 2

你没有像这样使用label-hover 类来设置伪选择器的样式吗？还是我误解了你的问题？

.label-hover {
   color: orange;
   opacity: 0.5;
}

.label-hover:hover {
   opacity: 1;
}

您不能使用内联样式 (CSS Pseudo-classes with inline styles) 设置伪选择器，我认为使用 javascript 来查看元素是否悬停是一种不必要的复杂和骇人听闻的方法。