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

Posted 2023-02-21

【中文标题】如何使用 css 模块同时应用两个类名？

【英文标题】：How I apply two classname at the same time using css module?

【发布时间】：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;

【参考方案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;

这是你要找的吗？

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