Question

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

假设您有每个React组件的styles.js文件。您使用该样式文件设置组件的样式。但是你想对按钮（或其他）做悬停效果。

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

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

另一种方法是根据某些条件（可能由州或其他任何东西触发）设置组件的样式。这里，如果悬停状态为true，则使用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);

更新04/03/2018

这最近得到了一些upvotes，所以我觉得我应该更新它，因为我已经停止使用Radium。我并不是说Radium对于伪造的选择器来说仍然不是很好，只是它不是唯一的选择。

自从Radium问世以来，已有大量的css-in-js库值得考虑。我当前选择的是emotion，但我鼓励你尝试一些，找到最适合你的那个。

emotion - 下一代CSS-in-JS
fela - Universal，Dynamic＆amp; JavaScript中的高性能样式
styled-jss - JSS顶部的样式组件
react-jss - React的JSS集成
jss - JSS是一个使用JavaScript作为主语言的CSS创作工具
rockey - 使用JS的组件的Stressless CSS。使用功能混合编写基于组件的CSS。
styled-components - Universal，Dynamic＆amp; JavaScript中的高性能样式
aphrodite - 这是内联样式，但它们有效！还支持通过CSS设置样式
csx - ϟ功能性UI组件中功能CSS的CSS-in-JS解决方案
styled-jsx - 完全支持JSX而不妥协
glam - js中疯狂的好css
glamor - 您的javascript中的css
glamorous - 使用优雅的API解决了React组件样式，占用空间小，性能卓越（通过魅力）
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来查看元素是否悬停是一种不必要的复杂和hackish方式。

反应伪选择器内联样式

2 个答案:

更新04/03/2018