01-css模块化

最新推荐文章于 2022-03-22 16:09:40 发布

尘寰ya

最新推荐文章于 2022-03-22 16:09:40 发布

阅读量376

点赞数

分类专栏： react 文章标签： css javascript react.js

本文链接：https://blog.csdn.net/qq_44165941/article/details/122849140

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了在React应用中如何使用CSS模块化来实现样式局部生效。通过引入.module.css文件并将其作为对象导入，可以确保类名的唯一性。在`Child`组件中，使用`style.item`来指定样式，展示了CSS模块化如何与React组件结合使用，实现组件内部样式的定制。同时，文章也提到了常规CSS和模块CSS在应用中的差异。

摘要由CSDN通过智能技术生成

样式局部生效，命名文件为文件名.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;
}