Next.js选中标签功能异常：添加类后CSS样式不生效

你的问题核心在于直接操作DOM修改类名不符合React的状态驱动渲染逻辑，同时类名拼接方式也存在问题，导致CSS Modules的样式无法正确应用。以下是具体修复方案：

问题分析 #

1. React通过虚拟DOM管理渲染流程，直接用document.getElementById操作真实DOM会和React的渲染逻辑冲突，易导致样式不生效或状态不一致。
2. 添加类名时未加空格，会造成类名拼接错误（比如变成usersOptionSelected而非usersOption Selected），即使类存在也无法被识别。
3. 按钮未绑定CSS Modules的基础类，导致局部作用域的.Selected样式无法正确关联到按钮元素。

修复步骤 #

1. 用状态跟踪选中选项 #

替换原有状态，改为跟踪当前选中的选项，完全通过状态驱动UI渲染：

import React, { ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'

import style from '../styles/Search.module.css'

const Search: PageWithLayout = () => {
  // 跟踪当前选中的选项，初始默认选中USERS
  const [selectedOption, setSelectedOption] = useState<string>('USERS');

  const setSearchOption = (searchFor: string) => {
    setSelectedOption(searchFor);
    console.log(searchFor);
  }

  return (
    <>
      <div className='pageContent'>
        <div className={style.SearchBarContainer}>
          <div className={style.SearchContainer}>
            <i className="fa-solid fa-magnifying-glass"></i>
            <input className={style.SearchBar} type={'text'} placeholder='Search...' />
          </div>
          <div className={style.SearchOptions}>
            {/* 动态判断是否选中，拼接对应类名 */}
            <button 
              className={`${style.SearchOptionButton} ${selectedOption === 'USERS' ? style.Selected : ''}`}
              onClick={() => setSearchOption('USERS')}
            >
              Users
            </button>
            <button 
              className={`${style.SearchOptionButton} ${selectedOption === 'POSTS' ? style.Selected : ''}`}
              onClick={() => setSearchOption('POSTS')}
            >
              Posts
            </button>
          </div>
        </div>
        <div className='SearchedContent'></div>
      </div>
    </>
  )
}

Search.getLayout = function getLayout(page: ReactElement) {
  return (
    <MainLayout>
      {page}
    </MainLayout>
  )
}

export default Search

2. 完善CSS Modules样式 #

在Search.module.css中补充按钮的基础样式和选中状态样式：

/* 保留你原有的其他样式 */

.SearchOptions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* 按钮基础样式 */
.SearchOptionButton {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: background 0.2s;
}

/* 选中状态样式 */
.Selected {
  background-color: #0070f3;
  color: white;
  border-color: #0070f3;
}

关键改进点 #

• 移除所有DOM操作，完全通过React状态控制UI渲染，避免虚拟DOM与真实DOM的冲突。
• 使用模板字符串动态拼接类名，确保类名间有空格，保证样式能被正确识别。
• 给按钮添加CSS Modules的基础类SearchOptionButton，让局部作用域的.Selected样式能正确应用到按钮上。

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