小编Vie*_*ang的帖子

您认为使用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.如果有人有更好的方法,我很想知道.谢谢!