React - 组件样式模块化 一. 存在的问题二. 解决样式冲突,组件样式模块化
当多个组件使用相同类名时,设置的css样式会存在冲突渲染。
一. 存在的问题例如有Page1、Page2两个组件,在 Page1 组件引入了css样式,Page2 组件未引入。
组件层级:
Page1/index.jsx
import React from "react"; // 引入 css 样式 import "./index.css"; export default function Page1() { return <div className="text">Page1</div>; }Page1/index.css
.text { color: red; }Page2/index.jsx
import React from "react"; export default function Page2() { return <div className="text">Page2</div>; }src/App.js
import "reset-css"; import "@/App.css"; import Page1 from "./components/Page1"; import Page2 from "./components/Page2"; function App() { return ( <div className="App"> <Page1 /> <Page2 /> </div> ); } export default App;理想效果:Page1组件的字体显示红色,Page2组件的字体正常显示为默认黑色。 实际效果:Page1组件、Page2组件的字体都显示为红色。
页面效果:
二. 解决样式冲突,组件样式模块化css样式文件后缀改为.module.css,引用 css样式文件 的组件中 class类名 使用对象形式命名。 修改之后,组件样式正常显示。
组件层级:
Page1/index.jsx 文件修改
import React from "react"; // 引入 css 样式 import style from "./index.module.css"; export default function Page1() { // 类名使用 style.xxx 形式 return <div className={style.text}>Page1</div>; }页面效果:
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |