React 中的样式
- React 并没有像 Vue 那样有提供特定的区域给我们编写 CSS 代码
- 所以你会发现在 React 代码中, CSS 样式的写法千奇百怪
内联样式
内联样式的优点：
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前
state 中的状态
内联样式的缺点:
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素)
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: 'red'
}
}
render() {
return (
<div>
<p style={{fontSize: '50px', color: this.state.color}}>我是段落1</p>
<p style={{fontSize: '50px', color: 'green'}}>我是段落2</p>
<button onClick={() => {
this.btnClick()
}}>按钮
</button>
</div>
);
}
btnClick() {
this.setState({
color: 'blue'
})
}
}
export default App;
