使用带有导入样式表的伪类作为 CSS 模块

Question

我将 React 与 TypeScript 结合使用，每个组件都有一个单独的 CSS 文件。我按如下方式导入 CSS 文件：

import styles from 'pages/login/Login.module.css'

分配一个 className 看起来像这样：

<input className={styles.username} ref={nameRef} type="text"  placeholder="USERNAME"/>

是否可以选择使用伪类？

<input className={styles.username:active} ref={nameRef} type="text"  placeholder="USERNAME"/>

这种方法显然行不通，它只是为了让我更清楚我想要实现的目标。

Answer 1

一旦应用了className，该 CSS 类的样式表中定义的所有伪选择器也应该自动应用。

因为 css 模块的工作原理是向元素添加类，所以您可以轻松添加伪类选择器。

/* component/text.css */
.text {
  color: #777;
  font-weight: 24px;
}
.text:hover {
  color: #f60;
}

/* component/text.jsx */
import styles from './text.css';

<p className={ styles.text }>Text with hover</p>

不幸的是，我们无法一一应用它们。