在React.js中样式化

React.js的样式可以通过以下两种方式完成

• CSS样式表

• 内联样式

首先来看CSS样式表

我们有App.js文件，如下所示-

import React, {Component} from 'react';
import './App.css';
class App extends Component {
   render(){
      return (
         <div className="App">
            <p className="myColoredText">Styling React Components</p>
            </div>
      );
   }
}
export default App;

在App.js文件中，我们导入了一个包含CSS类myColoredText的App.css文件

请注意

list-paddingleft-2">

• 我们在属性className的双引号中使用了CSS类的名称

• JSX使用camelCase表示法在html元素上编写属性。

我们有如下的App.css-

.myColoredText{
   color:blue;
   background:yellow;
   margin:auto;
   width:20%;
   padding:20px;
}

用上述方法编写css类的问题是，一旦webpack构建了最终的css文件，css类便成为全局类。

然后，css类可以被具有相同css类的其他css文件覆盖。

避免CSS类全球化的解决方案

使用CSS模块可以防止这种情况的发生。CSS文件名应以module.css扩展名结尾。

此解决方案在工作流中创建唯一的CSS类，以防止它们被覆盖

CSS类将成为fileName_cssClassName__hashValue

按照这种逻辑，上面使用的App.css文件应重命名为App.module.css

我们可以在应用程序中使用global和module.css文件。

对于普通的CSS，我们可以不使用module.css扩展名来创建全局CSS文件。

让我们看看React组件的内联样式

内联样式是使用JavaScript对象（键值属性）创建的。

示例

import React, {Component} from 'react';
import './App.css';
class App extends Component {
   render(){
      let myInlineStyle={
         boxShadow:'0 2px 3px #ccc',
         border:'2px solid blue',
         marginTop:'50px'
      }
      return (
         <div className="App">
            <p className="myColoredText" style={myInlineStyle}>Styling React Components</p>
         </div>
      );
   }
}
export default App;

内联样式也存在问题。要使用鼠标悬停元素，需要第三方库（如镭）。

我们可以如下安装镭-

on the application directory, run the following command
npm install --save radium

在jsx文件中添加镭。

add import for radium
import Radium from 'radium';

安装后，将悬停对象添加到嵌入式样式对象中，如下所示：

let myInlineStyle={
   boxShadow:'0 2px 3px #ccc',
   border:'2px solid blue',
   marginTop:'50px',
   ':hover':{
      background:'white'
   }
}

使用镭，App.js文件如下所示：

import React, {Component} from 'react';
import './App.css';
import Radium from 'radium';
class App extends Component {
   render(){
      let myInlineStyle={
         boxShadow:'0 2px 3px #ccc',
         border:'2px solid blue',
         marginTop:'50px',
         ':hover':{
            background:'white'
         }
      }
      return (
         <div className="App">
            <p className="myColoredText" style={myInlineStyle}>Styling React Components</p>
         </div>
      );
   }
}
export default Radium(App);

重要的是我们必须像下面这样在Radium中包装或导出组件-

export default Radium(App);

现在，在悬停时它将背景显示为白色。这样我们就可以处理内联样式。它基本上是一个JavaScript对象。