React+TypeScript中如何结合CSS Modules使用伪类？

你不能在JSX里直接通过styles.username:active这种方式使用伪类——CSS Modules导出的只是类名的映射关系，伪类选择器是需要在CSS文件中定义的，不是在JSX里动态拼接的。

原生伪类（如:active、:hover）的实现 #

直接在你的Login.module.css文件中，给目标类添加伪类样式即可：

/* Login.module.css */
.username {
  /* 基础样式 */
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

/* 定义:active伪类样式 */
.username:active {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
  outline: none;
}

然后JSX中依然正常使用类名：

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

当元素触发:active状态时，浏览器会自动应用你在CSS中定义的伪类样式。

自定义状态类（类似伪类的动态效果） #

如果需要结合组件内部状态实现类似伪类的动态样式，可以通过动态拼接类名实现：

1. 在CSS中定义额外状态类：

/* Login.module.css */
.username {
  /* 基础样式 */
}

.username.custom-active {
  background-color: #e3f2fd;
}

2. 在组件中根据状态切换类名：

import { useState, useRef } from 'react';
import styles from 'pages/login/Login.module.css';

const Login = () => {
  const [isCustomActive, setIsCustomActive] = useState(false);
  const nameRef = useRef<HTMLInputElement>(null);

  return (
    <input 
      className={`${styles.username} ${isCustomActive ? styles['custom-active'] : ''}`}
      ref={nameRef} 
      type="text" 
      placeholder="USERNAME"
      onFocus={() => setIsCustomActive(true)}
      onBlur={() => setIsCustomActive(false)}
    />
  );
};

export default Login;

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