7. React组件基础样式控制：行内样式，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;