内联样式

什么是内联样式

内联样式是一种将 CSS 样式直接写在 JSX 元素上的方式。在 React 中，可以使用内联样式来设置元素的样式。

基本用法

使用style属性设置样式，样式的属性名使用驼峰命名法。

export default function InlineStyleA() {
    const style = {
        color: 'red',
        fontSize: '20px',
    };
    return <div style={style}>Hello, React</div>;
}

直接在标签中定义样式，这里第一层{}表示JSX的表达式，第二层{}表示对象。

export default function InlineStyleB() {
    return <div style={{ color: 'blue', fontSize: '20px' }}>Hello, React</div>;
}