如何在React CSS Modules中使用后续兄弟选择器？

问题核心：CSS Modules会为本地类名生成唯一哈希后缀，你写的.is-invalid ~ .validationError选择器里的类名未被正确替换，导致无法匹配到实际渲染的带哈希类名的元素。

以下是两种针对性解决方案：

方案1：当.is-invalid是全局类（如第三方UI库类） #

在CSS文件中用:global()包裹全局类名，确保本地类validationError被正常哈希替换：

:global(.is-invalid) ~ .validationError {
    display: inline !important;
}

.validationError {
    display: none; /* 默认隐藏错误提示 */
}

组件中正常调用本地类：

<span className={styles.validationError}>输入格式错误</span>

方案2：当.is-invalid也是本地CSS Module类 #

直接在CSS中编写选择器，两个类都会被自动替换为哈希后的名字：

.is-invalid {
    border-color: #dc3545; /* 示例样式 */
}

.is-invalid ~ .validationError {
    display: inline !important;
}

.validationError {
    display: none;
    color: #dc3545;
}

组件中为对应元素添加类名：

<input 
  className={isInputInvalid ? styles.isInvalid : ''} 
  type="text"
/>
<span className={styles.validationError}>请输入正确格式</span>

注意：尽量避免滥用!important，可以通过调整选择器优先级（如增加父类层级）替代，除非确实需要强制覆盖高优先级样式。

内容的提问来源于stack exchange，提问作者Leon