在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文件
请注意
我们在属性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对象。