你认为用React内联样式处理样式伪 Select 器的好方法是什么?有哪些优点和缺点?

说你有一个新的风格.每个React组件的js文件.可以使用该样式文件设置零部件的样式.但是你想在一个按钮上做一个悬停效果(或者别的什么).

一种方法是拥有一个全局CSS文件,并以这种方式处理样式化伪 Select 器.在这里,"标签悬停"类来自一个全局CSS文件和样式.标签来自组件样式文件.

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

另一种方法是根据特定条件(可能由状态或其他触发条件)设置组件的样式.在这里,如果悬停状态为true,则使用样式.按钮和样式.纽扣,否则就使用样式.按钮

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

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

推荐答案

我建议任何想用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年3月4日

最近这已经得到了一些支持,所以我觉得我应该更新它,因为我已经停止使用镭.我并不是说镭对于psuedo Select 器来说仍然不是很好的 Select ,只是它不是唯一的 Select .

自从Radium问世以来,js库中出现了大量值得考虑的css.我目前的 Select 是emotion个,但我鼓励你try 一些,找到最适合你的.

  • emotion - ?‍? JS中的下一代CSS
  • fela-通用、动态和;JavaScript中的高性能样式
  • JSS之上的styled-jss个样式化组件
  • react-jss-针对React的JSS集成
  • jss-JSS是一个CSS创作工具,它使用JavaScript作为宿主语言
  • rockey-使用JS的组件无压力CSS.使用函数混合编写基于组件的CSS.
  • styled-components-通用、动态和;JavaScript中的高性能样式
  • aphrodite-这是内联样式,但它们很管用!还支持通过CSS设置样式
  • csx-ϟJS中的CSS解决方案,用于功能性UI组件中的功能性CSS
  • styled-jsx-对JSX的全面CSS支持
  • glam-在你的js中有非常好的css
  • glamor-javascript中的css
  • glamorous-React组件样式通过优雅的API、小的占地面积和出色的性能(通过Glamer)解决
  • styletron - ⚡️ 通用、高性能的JavaScript样式
  • radium-用于管理React元素上的内联样式的工具集.
  • aesthetic-美学是一个强大的React库,用于设置组件的样式,无论是JS中使用对象的CSS、导入样式表,还是简单地引用外部类名.
  • j2c-JS库中的CSS,虽小但功能强大

(Source)

Reactjs相关问答推荐

InfiniteScroll持续获取数据,直到超过最大更新深度

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

将对象添加到集合中的数组时的no_id字段

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画?

如何在整个应用程序中显示通用弹出窗口中的点击事件

在新屏幕上显示照片时出现问题-react

Next.js Next-Auth登录函数重定向到http://localhost:3000/api/auth/error

无法使用Reaction日期选取器和Next.js设置初始日期

tRPC/react-query,在所有查询完成之前,组件不会收到任何 useQuery 的结果

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

为什么在 React 的 useEffect 中使用 onAuthStateChanged ?

修改React数据表扩展组件

如何管理可重用无线电输入的 React 状态?

在 monorepo 内的工作区或库之间共享 redux 状态

React Js和Firestore中如何将当前ID与集合中的ID查询以仅显示具有相似字段和值的文档-第二部分

无法从子组件传递数据到父组件

带有 webpack 错误多个文件匹配路由名称的 Expo-router.无法Bundle 或部署应用程序

将 ref 赋予功能组件以使用内部功能

在表格中显示具有自定义声明的用户状态

我想将悬停 colored颜色 更改为红色.写了一个话题,这个元素没有react ,怎么解决呢?