JSX 样式处理

学习目标： 能够在 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
1
2
3
4
5
6
7
8

  - 行内样式·style·优化写法

function App() {
  const divStyle1 = {
    color:'blue',
    fontSize:'20px'
  }
  return (
        <div className="App">
            <div style={divStyle1}>this is div</div>
        </div>
    )
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13

 2. 类名样式
实现： 在元素身上绑定一个 className 属性即可
  1. 创建一个 css 样式表文件 app.css

.colors {
  color: peru;
  font-size: 40px;
}
1
2
3
4

  2. JSX 中引入 css 文件

// 使用import引入样式表文件
import './app.css'
1
2

  3. 在元素上用 className 属性绑定 class 样式

    <div className='colors'>类名样式</div>
1

运行结果：