如何使用 css 模块同时应用两个类名？答案

【问题标题】：How I apply two classname at the same time using css module?如何使用 css 模块同时应用两个类名？
【发布时间】：2021-09-10 20:49:54
【问题描述】：

我需要使用 css 模块同时应用两个类名，但我不知道如何。 *当我输入无效时，我需要输入表单的样式无效

import style from './Input.module.css';

<div className={style.form_control && ${!inputState.is valid && style.form_control__invalid}}>
</div> 

.form_control{
    margin: 5px 0;
}

.form_control label,
.form_control input,
.form_control p{
  display: block;
  text-align: end;
}

.form_control_invalid label,
.form_control_invalid p {
  color: red;
}

.form_control
__invalid input,
.form_control_invalid textarea {
  border-color: red;
  background: #ffd1d1;
}

【问题讨论】：

标签： css css-modules react-css-modules

【解决方案1】：

<div 
    className={`${style.form_control} ${!inputState.isValid && 
        style.form_control__invalid}`}>
</div>

【讨论】：

【解决方案2】：

你可以像这样链接 css 类：

.firstclass.secondclass {
  // styling comes here
}

你的情况可能是这样的：

.form_control.form_control_invalid label,
.form_control.form_control_invalid p {
  color: red;
}

这是你要找的吗？

如果不是，请进一步声明。

【讨论】：