如何使用 css 模块设置特定按钮的样式？

问题描述

我在 react 中使用 css 模块，因为我想将 css 范围限定为特定组件。我有 Person.js 和 App.js 文件。我只希望 Person.js 中的按钮具有红色背景色。

我也是这样

Person.js

import styles from './person.module.css';


const Person = () => {
    return (
        <div>
            <button className={styles.button}>Person compo button</button>
        </div>
    )
}

export default Person;

person.module.css

.button {
    background-color: red;
}

App.js

import './App.css';
import Person from './Person';

function App() {
  return (
    <div className="App">
    <button className="button">App compo button</button>
     <Person></Person>
    </div>
  );
}

export default App;

现在只有 - Person compo 按钮的背景颜色为红色。但我在这里使用 css 类。 如果我想在不使用类的情况下为 Person.js 文件中的按钮设置样式怎么办

所以我将在 person.module.css 中只有按钮样式

button {
   background-color: red;
}

我现在如何使我的 Person.js 文件中的按钮从 person.module.css 中获取这种样式？

解决方法

一种方法是将一个类附加到 Person div：

const Person = () => {
    return (
        <div className={styles.person}>
            <button>Person compo button</button>
        </div>
    )
}

在你的 person.module.css 中，引用 .person 类中的所有按钮：

.person button {
   background-color: red;
}