如何在 React 应用程序中使用 Radium 进行内联样式？

Radium是一个流行的用于 React 的 npm 包，它允许我们使用带有伪选择器和媒体查询的内联样式。如果没有这个第三方包，就不能用伪选择器做内联样式，因为 React 不允许我们在内联样式中使用伪选择器。

伪选择器的示例： hover、visited、link 等。

在 React 应用程序中添加和使用 RADIUM 的步骤：这是一个样式化具有悬停（伪选择器）效果的按钮的示例。

第 1 步：为项目创建一个新文件夹。

第 2 步：现在在您的终端中，从项目文件夹的根目录运行以下命令，以安装 create-react-app 并将其保存在全局范围内。

$ npm install create-react-app -g

第 3 步：现在使用终端中的命令创建一个示例反应应用程序。将其命名为我的应用程序..

$ create-react-app my-app

第 4 步：您可以从 my-app 的根目录使用终端中的命令查看示例反应应用程序正在运行（http://localhost:3000/）。

$ npm start

第 4 步：现在转到编辑器中的 app.js 文件并对其进行编辑，使其返回一个简单的按钮。

第 5 步：现在使用命令从 my-app 的根目录安装 REDIUM。

$ npm install --save radium

第 6 步：在您的 app.js 文件中导入 RADIUM，然后再使用它。

第 7 步：编辑应用程序，js。

Javascript

import Radium from 'radium';
import React from 'react';
  
function App() {
  const style={
    ':hover':{
      backgroundColor: 'green'
    }
  }
  return (
    

      
Now you can see hover is working in inline styling
    example of radium
    
  );
}
  
export default Radium(App);

第 8 步：其他伪选择器的格式也相同。

第 9 步：现在使用命令再次运行您的应用程序。

$ npm start

输出：现在，您可以看到我们的按钮添加了悬停效果。