JSX 样式处理

样式处理"/>

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

  - 行内样式·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>

运行结果：