学习目标: 能够在 JSX 中实现 CSS 样式处理
1. 行内样式
实现: 在元素身上绑定一个 style 样式
- 行内样式 · style
function APP(){
return (
<div className="App">
<div style={{color:'red',fontSize:'10px'}}>this is div</div>
</div>
)
}
export default App
- 行内样式·style·优化写法
function App() {
const divStyle1 = {
color:'blue',
fontSize:'20px'
}
return (
<div className="App">
<div style={divStyle1}>this is div</div>
</div>
)
}
export default App;
2. 类名样式
实现: 在元素身上绑定一个 className 属性即可
1. 创建一个 css 样式表文件 app.css
.colors {
color: peru;
font-size: 40px;
}
2. JSX 中引入 css 文件
// 使用import引入样式表文件
import './app.css'
3. 在元素上用 className 属性绑定 class 样式
<div className='colors'>类名样式</div>
运行结果: