7. React组件基础样式控制：行内样式，class类名控制

7. React组件基础样式控制：行内样式，class类名控制

• 组件基础样式方案
• • 1.行内样式(不推荐)
  • [2. class类名控制](#2. class类名控制)

组件基础样式方案

React组件基础的样式控制有两种方式，行内样式和类名样式。

1.行内样式(不推荐)

外层的 {} 是为了识别里面的对象，key 代表 css 的属性，value 就是属性的值。

function App5() {

    return (

        <div className="App">
            这是 App3.js<br/>

            {/* 行内样式 */}
            <div style={{color: 'red'}}>行内样式</div>
        </div>
    )
}

2. class类名控制

如在 index.css 中声明样式

.foo{
    color: red;
}

然后进行调用

// React 组件的样式
// 1. 行内样式
// 2. 类名样式

import './index.css';
function App5() {

    return (

        <div className="App">
            这是 App5.js<br/>
            {/* 类名样式 */}
            <div className="foo">类名样式</div>
        </div>
    )
}

export default App5;