第十八章 React中的样式模块化处理

news2025/1/21 12:04:16

在React中组件如何使用本地的样式，而不对其他组件产生影响呢？我们这里需要使用样式的模块化处理，使得组件的样式只在该组件内部起作用。

这里我们通过两个组件应用说明。

定义组件

定义Hello组件与自定义样式

Hello/index.css

.title{
    color:red;
}

Hello/index.jsx

import {Component} from "react"
import "./index.css"

export default class Hello extends Component {
  render(){
    return <h1 className="title">Hello World</h1>
  }
}

定义Welcome组件与自定义样式

Welcome/index.css

.title{
    color:green;
}

Welcome/index.jsx

import { Component } from "react";

import "./index.css"

export default class Welcome extends Component{
  render(){
    return <h2 className="title">Welcome</h2>
  }
}

引入组件大到App容器

import { Component} from "react"

import Hello from "./components/Hello"
import Welcome from "./components/Welcome"

export default class App extends Component {
  render() {
    return (<div>App
      <Hello/>
      <Welcome/>
    </div>)
  }
}

查看效果

在这里插入图片描述

从上图我们看到字体颜色中我们的Hello World应该是红色，但是确实绿色，这是因为两个组件都被引入到了App容器里面，以致于css样式被覆盖了。

改造样式模块化

步骤1：请在CSS文件中使用:local关键字来定义本地作用域的样式。

:local .title {
  color: green;
}

步骤2：修改样式文件名称

index.css ===> index.module.css

步骤3：修改样式引入方式

import welcomesty from "./index.module.css"

步骤4：修改类名使用方式

import { Component } from "react";

import welcomesty from "./index.module.css"

export default class Welcome extends Component{
  render(){
    return <h2 className={welcomesty.title}>Welcome</h2>
  }
}

步骤5：查看效果

在这里插入图片描述

从上图可以看到，组件的字体颜色都是其内部样式文件定义的，并没有被覆盖，说明我们的样式模块化已经生效。

总结

在React中，可以使用CSS模块来为组件添加样式。要使用CSS模块，请在CSS文件中使用**:local关键字**来定义本地作用域的样式。例如，以下CSS代码将定义一个本地作用域的样式：

:local .myClass {
  color: red;
}

然后，在React组件中，可以使用import语句将CSS模块导入组件中，并使用className属性将样式应用于组件。例如，以下代码将导入名为styles的CSS模块，并将其应用于MyComponent组件：

import styles from './path/to/styles.module.css';

function MyComponent() {
  return (
    <div className={styles.myClass}>
      Hello World!
    </div>
  );
}