React中的模块化样式表 .module

最新推荐文章于 2024-02-20 09:40:44 发布

Aiazer

最新推荐文章于 2024-02-20 09:40:44 发布

阅读量207

点赞数

分类专栏： React 文章标签： react.js javascript Powered by 金山文档

本文链接：https://blog.csdn.net/Aiazer/article/details/129176589

版权

本文介绍了React中如何使用模块化样式表（.module.css）来避免样式命名冲突。通过将样式表命名并修改引入方式，组件的样式命名会被转换为组件名+类名+哈希值，从而确保样式隔离，防止不同组件间的样式覆盖问题。

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

Vue3中有 scoped来避免命名冲突带来的样式覆盖

React中也有与之相同功能的样式模块化操作以解决

请注意本文默认读者掌握基础React知识只做对模块化样式表的讲解

在React的两个组件中使用了相同的className命名空间,当他们渲染到dom中时就会出现冲突现象

// index.jsx 主页面
import { createRoot } from 'react-dom/client';
import DefaultLayouts from './layouts/DefaultLayouts';

let root = createRoot(document.querySelector('#root'));
root.render(<DefaultLayouts/>);

// DefaultLayouts.jsx 总布局文件  
import A from "../views/A/A"
import B from "../views/B/B"

const DefaultLayouts = (props) => {

    return <>
        <h3>DefaultLayouts</h3>
        <A></A>
        <B></B>
    </>

}