React 伪选择器内联样式

Posted 2023-03-06

【中文标题】React 伪选择器内联样式

【英文标题】：React pseudo selector inline styling

【发布时间】：2017-09-27 20:15:23

【问题描述】：

您认为使用 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>

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

【参考方案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)

【讨论】：

我试图不使用任何额外的依赖项，但 Radium 看起来是一个很好的解决方案。感谢您的建议。

React、Redux 和 Radium... 3 R 让 Web 开发变得简单 ;)

一直在玩 Radium，它非常简单。好建议

我很高兴它对你有用。如果您认为这已经回答了您的问题，那么请在搜索类似问题时接受它以帮助其他用途。如果您还没有投票，也可以接受有用的答案。详情请见this help article。

@tasqyn 我建议阅读情感文档。他们很不错。介绍中甚至有与这个emotion.sh/docs/introduction

非常相似的例子

【参考方案2】：

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

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


.label-hover:hover 
   opacity: 1;

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

【讨论】：

同时拥有 style=styles.label 和 className='label-hover' 属性似乎不是 DRY，所以我试图在两者之间做出决定。看起来 CSS 获胜，因为使用 React 内联样式设置伪选择器的样式看起来并不简单。感谢链接。

另一个很好的例子是使用 JS 主题管理器，比如 Material ui。有时您需要从那里获取颜色，因此您必须通过 react 插入它