设置外联样式（使用更多） - 图1

设置外联样式（使用更多） - 图2

设置外联样式（使用更多） - 图3

设置外联样式（使用更多） - 图4

App.js

/** * 外联样式 * 01 全局外联样式 * 所有组件当中都可以直接进行使用 * 02 组件级别的外联样式 * 只有某一个组件可以进行使用 * 组件名.module.css 安装2个包 npm install —save style-components npm install —save styled-components

设置外联样式（使用更多） - 图5

*/ function App() { return( //定义类使用className，类名用‘’包裹 <div className={‘box’}>外联样式</div> ) } export default App

Test.js

import React from ‘react’ import style from ‘./Test.module.css’ import styled from ‘styled-components’ // 自定义标签，相当于把样式作为组件使用，把CSS样式写入了js文件中 //相当于创建div标签，设置样式使用``模板字符串 //attrs方法给div设置属性 const SectionDiv = styled.div.attrs({ className:‘box1 box2’ })` width: 100px; height: 100px; background-color: hotpink; ` function Test () { return ( <div> <div className={‘box’}>Test 中的 div</div> <p className={style.item}>Test中的P,使用自己的样式</p> <SectionDiv/> </div> ) } export default Test