如何使用 css 模块同时应用两个类名?

问题描述

我需要使用 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;
}

解决方法

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

你可以像这样链接 css 类:

.firstclass.secondclass {
  // styling comes here
}

在你的情况下,它可以是这样的:

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

这是您要找的吗?

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