反应伪选择器内联样式

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>

这两种方法都让人觉得有点hacky.如果有人有更好的方法,我很想知道.谢谢!

Answer 1

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

它支持: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);

更新04/03/2018

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

自从Radium问世以来,已有大量的css-in-js库值得考虑.我目前的选择是情绪,但我鼓励你尝试一些,找到最适合你的.

• 情感 - 下一代CSS-in-JS
• fela - JavaScript中的通用,动态和高性能样式
• styled-jss - JSS之上的样式组件
• react-jss - React的JSS集成
• jss - JSS是一个CSS创作工具,它使用JavaScript作为宿主语言
• rockey - 使用JS的组件的Stressless CSS.使用功能混合编写基于组件的CSS.
• 样式组件 - JavaScript中的通用,动态和高性能样式
• 阿芙罗狄蒂 - 它是内联样式,但它们有效!还支持CSS样式
• csx - ϟ一个CSS-in-JS解决方案,用于功能UI组件中的功能CSS
• styled-jsx - 对JSX的完全CSS支持,没有妥协
• 华丽 - 在你的js疯狂的好css
• 魅力 - 你的JavaScript中的CSS
• 迷人 - React组件样式通过优雅的API解决,占地面积小,性能卓越(通过魅力)
• styletron - ⚡️通用,高性能的JavaScript风格
• radium - 用于管理React元素上的内联样式的工具集.
• 审美 - Aesthetic是一个功能强大的React库,用于样式组件,无论是使用对象的CSS-in-JS,导入样式表,还是简单地引用外部类名.
• j2c - JS库中的CSS,虽小但功能强大

(来源)