如何在 ReactJS 中使用 Radium？

在本文中，我们将了解如何在 React 应用程序中的组件应用内联样式。

Radium 是用于为 JSX 元素添加内联样式和伪选择器（例如 **:hover、:focus、:active** 等）的流行的第三方包应用程序。

安装模块

npm install --save radium

或

yarn add radium

Npm 是管理我们 React 包的节点包管理器，而 yarn 是更安全、更快速、更轻量级的包管理器。

示例

App.jsx

import Radium from 'radium';
import React from 'react';

function App() {
   const style = {
      ':hover': {
         backgroundColor: '#000',
         color: '#fff',
      },
   };
   return (
      <div>
      <h3>TutorialsPoint</h3>
      <button style={style}>Hover Me</button>
      </div>
   );
}
export default Radium(App);

我们还可以向组件添加其他伪选择器和自定义 CSS 样式。

输出

这将产生以下结果。

Rahul Bansal

更新于： 2021-03-18

749 次浏览

开启你的 职业生涯

完成课程，获得认证

开始