01-css模块化

• 样式局部生效，命名文件为 文件名.module.css
• 引入时作为一个对象使用(类名是对象的item项)

//app.js
import './App.css'
import Child from './Child'

function App() {
  return (
    <div>app
      <ul>
        <li>111</li>
        <li>222</li>
      </ul>
      <Child></Child>
    </div>
  )
}
export default App

//app.css
li {
  width: 100px;
  background-color: pink;
}

//Child.jsx
import React from 'react'
import style from './Child.module.css'

export default function Child() {
  return (
    <div>Child
      <ul>
        <li className={ style.item }>child 111</li>
        <li className='item'>child 222</li>
      </ul>
    </div>
  )
}

// Child.module.css
.item {
  width: 200px;
  background-color: aqua;
}

效果展示