问题描述
我需要使用 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;
}
这是您要找的吗?
如果不是,请进一步声明。