数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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 文件。
请注意
- 我们在双引号中使用了 css 类的名称，并使用 className 属性。
- JSX 使用驼峰命名法在 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。
我们可以在应用程序中同时使用全局和 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;内联样式也存在一个问题。对于使用鼠标悬停元素，需要 radium 等第三方库。
我们可以如下安装 radium：
on the application directory, run the following command npm install --save radium
在 jsx 文件中添加 radium。
add import for radium import Radium from 'radium';
安装完成后，在内联样式对象中添加悬停对象，如下所示：
let myInlineStyle={
boxShadow:'0 2px 3px #ccc',
border:'2px solid blue',
marginTop:'50px',
':hover':{
background:'white'
}
}使用 radium 后，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 对象。
更新于： 2019年9月4日
532 次查看
广告