0
点赞
收藏
分享

微信扫一扫

01-css模块化

愚鱼看书说故事 2022-02-09 阅读 48
  • 样式局部生效,命名文件为 文件名.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;
}

效果展示

在这里插入图片描述

举报

相关推荐

0 条评论