CSS 反应伪选择器内联样式

React pseudo selector inline styling

提问by Vien Tang

What do you think are good ways to handle styling pseudo selectors with React inline styling? What are the gains and drawbacks?

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

Say you have a styles.js file for each React component. You style your component with that styles file. But then you want to do a hover effect on a button (or whatever).

假设每个 React 组件都有一个 style.js 文件。您可以使用该样式文件为组件设置样式。但是你想在按钮（或其他任何东西）上做一个悬停效果。

One way is to have a global CSS file and handle styling pseudo selectors that way. Here, the class 'label-hover' comes from a global CSS file and styles.label comes from the components style file.

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

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

Another way is to style the components based on certain conditions (that might be triggered by state or whatever). Here, if hovered state is true, use styles.button and styles.buttonHover otherwise just use styles.button.

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

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

Both approaches feels kind of hacky. If anyone has a better approach, I'd love to know. Thanks!

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

回答by Michael Peyper

My advice to anyone wanting to do inline styling with React is to use Radiumas well.

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

It supports :hover, :focusand :activepseudo-selectorswith minimal effort on your part

它支持:hover,:focus和:active伪选择器，您只需付出最少的努力

import Radium from 'radium'

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

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

const MyStyledComponent = Radium(MyComponent);

---

---

Update 04/03/2018

更新 04/03/2018

This has been getting a few upvotes lately so I feel like I should update it as I've stopped using Radium. I'm not saying Radium isn't still good and great for doing psuedo selectors, just that it's not the only option.

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

There has been a large number of css-in-js libraries since Radium came out which are worth considering. My current pick of the bunch is emotion, but I encourage you to try a few out and find the one that fits you best.

自从Radium出现以来，有大量的css-in-js库值得考虑。我目前的选择是情感，但我鼓励你尝试一些，找到最适合你的。

• emotion- ? The Next Generation of CSS-in-JS
• fela- Universal, Dynamic & High-Performance Styling in JavaScript
• styled-jss- Styled Components on top of JSS
• react-jss- JSS integration for React
• jss- JSS is a CSS authoring tool which uses JavaScript as a host language
• rockey- Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
• styled-components- Universal, Dynamic & High-Performance Styling in JavaScript
• aphrodite- It's inline styles, but they work! Also supports styling via CSS
• csx- ? A CSS-in-JS solution for functional CSS in functional UI components
• styled-jsx- Full CSS support for JSX without compromises
• glam- crazy good css in your js
• glamor- css in your javascript
• glamorous- React component styling solved with an elegant API, small footprint, and great performance (via glamor)
• styletron- ?? Universal, high-performance JavaScript styles
• radium- Set of tools to manage inline styles on React elements.
• aesthetic- Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
• j2c- CSS in JS library, tiny yet featureful

• 情绪——？下一代 CSS-in-JS
• fela- JavaScript 中的通用、动态和高性能样式
• styled-jss- 在 JSS 之上的样式化组件
• react-jss- 用于 React 的 JSS 集成
• jss- JSS 是一个 CSS 创作工具，它使用 JavaScript 作为宿主语言
• Rockey- 使用 JS 的组件的无压力CSS。使用功能性 mixins 编写基于组件的 CSS。
• styled-components- JavaScript 中的通用、动态和高性能样式
• aphrodite- 这是内联样式，但它们有效！还支持通过 CSS 进行样式设置
• csx- ? 功能性 UI 组件中功能性 CSS 的 CSS-in-JS 解决方案
• styled-jsx- 对 JSX 的完全 CSS 支持，没有妥协
• 华丽- 在你的 js 中疯狂的好 css
• 魅力- javascript 中的 css
• glamorous- React 组件样式通过优雅的 API、小尺寸和出色的性能解决（通过 glamor）
• styletron- ?? 通用、高性能的 JavaScript 样式
• radium- 一组用于管理 React 元素上的内联样式的工具。
• 美学- 美学是一个强大的 React 库，用于样式化组件，无论是使用对象的 CSS-in-JS、导入样式表，还是简单地引用外部类名。
• j2c- JS 库中的 CSS，小巧但功能强大

(Source)

（来源）

回答by Vien Tang

Is there a reason you're not styling the pseudo selectors with your label-hoverclass like this? Or am I misunderstanding your question?

您是否有理由不使用您的label-hover类来设置伪选择器的样式？还是我误解了你的问题？

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

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

You can't style pseudo selectors with inline styling (CSS Pseudo-classes with inline styles), and I think using javascript to see if the element is hovered is an unnecessarily complicated and hackish way of doing it.

您不能使用内联样式（带有内联样式的CSS 伪类）设置伪选择器的样式，而且我认为使用 javascript 来查看元素是否悬停是一种不必要的复杂和hackish 方式。