Reactjs 多个类的第二类可以'；t覆盖样式

button.module.css

.general_button {
    width: 100%; 
}

.next_btn {
    width: 35%;
}

button.js

import React from 'react';
import styles from './button.module.css';

const GeneralButton = ({ text, className}) => {
    return (
        <button className={`${styles.general_button} ${className}`}>
            <p className={styles.text}>{text}</p>
        </button>
    );
};

export { GeneralButton };

app.js

import React from 'react';
import classes from './app.module.css';
import { GeneralButton } from './components/Buttons';

const App = () => {
    return (
        <div>
            <GeneralButton className={classes.next_btn} text='next' />
        </div>
    )
}

export default App;

从“React”导入React；
从“./app.module.css”导入类；
从“./components/Buttons”导入{GeneralButton}；
常量应用=（）=>{
返回(
)
}
导出默认应用程序；

当我使用应用程序中的按钮组件时，按钮组件使用的是“宽度：100%”。我希望按钮组件的宽度为“35%”

---

由于这两个类都具有相同的特定性，因此您的应用程序会选择样式表中稍后出现的那个类。不幸的是，您对该订单有很大的控制权，因为它可能是由webpack（或您碰巧使用的任何捆绑包）生成的

使用模块化css的一个主要好处是避免了这样的特殊性之战，因此我建议稍微修改一下按钮组件——类似这样的方式可能会奏效：

const GeneralButton = ({ text, variant }) => {
  let buttonClass = styles.general_button;

  if (variant === "next") {
    buttonClass = styles.next_button;
  }

  return (
    <button className={buttonClass}>
      <p className={styles.text}>{text}</p>
    </button>
  );
};

const GeneralButton=（{text，variant}）=>{
let buttonClass=styles.general\u按钮；
如果（变量==“下一步”）{
buttonClass=styles.next\u按钮；
}
返回(
{text}
);
};

---

这里的优点是，按钮列出了如何显示它的选项，父组件只选择它需要的类型。这使得以后重新使用按钮组件更加安全，因为它封装了按钮的所有状态。

您是否尝试过将按钮的

显示属性设置为
块
或
内联块
？是的，我已经尝试过了。但它不能。宽度：35%！重要信息

？但我不想用“！“重要”。另一种方法？那么

？