React-组件-内联样式

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;