您在问题标签中提到了babel-plugin-react-css-modules，但没有提供任何使用它的详细上下文，这使您很难理解您的确切问题，但无论如何，我将给予一下。
我假设您正在尝试将CSS文件作为一个模块导入，如下所示：

import styles from "./styles.module.css"

const MyComponent = () => {
  return <div>
    <input className={styles['is-invalid']} />
    <div className={styles.validationError}>...</div>
  </div>
}

CSS在导入为CSS模块时会生成两个局部作用域的类。当你使用常规CSS模块时，上面的代码可以正常工作，例如通过Webpack loader。
然而，你使用的Babel插件实际上需要一种不同的方式来添加样式。下面是你应该根据文档做的事情：

// no need for named import here
import "./styles.module.css"

const MyComponent = () => {
  // note the different attribute: `styleName`
  //   - `styleName` uses a literal string
  //   - before, `className` used a variable from the imported `styles` module
  return <div styleName="validationError">...</div>
}

babel-plugin-react-css-modules将在编译时加载CSS，并将styleName属性替换为作用域为className的内联属性。上面链接的文档对此进行了更详细的解释。

我可以使用全局来修复这个问题。

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

我现在可以调用${syles.validationError}，它可以正常工作。

return (
  <>
    <div className={styles['is-invalid']}>
    
    </div>
    {/* some Node or nothing, is-invalid and validationError are brothers. */}
    <div  className={styles.validationError}>123</div>
  </>
)