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

Question

我在使用React和TypeScript进行开发，每个组件都有对应的CSS文件。我会按以下方式引入对应的CSS文件：

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

给一个元素分配一个类名的方法如下：

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

有没有使用伪类的选项？

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

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

- Luke_KS

---

也许考虑使用 active 作为一个条件来应用适当的样式？ - DJ2

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>

很遗憾，我们不能逐个应用它们。

- ghybs