React+Tailwind侧边栏hidden类不生效，宽度无法切换问题

核心问题：模板字符串语法错误 #

你代码里的className全用单引号'包裹，导致里面的${}变量插值根本不会被React解析，只是当作普通字符串处理，所以条件切换类完全没生效。另外还有几处语法和Tailwind类的错误：

具体错误点及修复： #

1. 侧边栏宽度切换逻辑错误
   原代码条件判断的语法写反了（用冒号:代替了问号?），同时包裹方式错误。另外h-100vh是无效的Tailwind类，要改成h-screen才能占满视口高度。
   错误写法：

   className={'bg-black w-[300px] h-100vh ${open: "w-[300px]" ? "w-[50px]"} transition-all duration-500'}
   

   修复后（改用反引号包裹，修正条件判断）：

   className={`bg-black h-screen transition-all duration-500 ${open ? 'w-[300px]' : 'w-[50px]'}`}
   

2. Logo显示/隐藏不生效
   同样是单引号导致变量不解析，改成反引号即可：
   错误写法：

   className={'${open? "block" : "hidden"} text-white text-[30px]'}
   

   修复后：

   className={`${open ? 'block' : 'hidden'} text-white text-[30px]`}
   

3. 菜单图标容器间距错误
   原代码重复写了ml-[50px]，且条件语法错误，改用ml-auto能让图标自动靠右，适配不同宽度：
   错误写法：

   className={'${open: "ml-[50px]": "ml-[0px]"} flex text-white text-[25px] mt-[12px] ml-[50px]'}
   

   修复后：

   className={`flex text-white text-[25px] mt-[12px] ${open ? 'ml-auto' : 'ml-0'}`}
   

4. 导航文本显示/隐藏不生效
   同样修正单引号为反引号：
   错误写法：

   className={'${open? "block": "hidden"} text-[20px]'}
   

   修复后：

   className={`${open ? 'block' : 'hidden'} text-[20px]`}
   

完整修复后的代码 #

import { FC } from "react";
import React, { useState } from 'react'
import { NavLink } from "react-router-dom";
import HomeIcon from '@mui/icons-material/Home';
import ConstructionIcon from '@mui/icons-material/Construction';
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import SettingsIcon from '@mui/icons-material/Settings';
import SummarizeIcon from '@mui/icons-material/Summarize';

import {FaBars} from "react-icons/fa"

const SideBar: FC = () => {
  const [open, setOpen] = useState(true);
  const toggle = () => {
    setOpen(!open);
  };
  return (
    <div className="flex">
      <div className={`bg-black h-screen transition-all duration-500 ${open ? 'w-[300px]' : 'w-[50px]'}`}>
        <div className="flex items-center px-[15px] py-[20px]">
          <h1 className={`${open ? 'block' : 'hidden'} text-white text-[30px]`}>
            Logo
          </h1>
          <div className={`flex text-white text-[25px] mt-[12px] ${open ? 'ml-auto' : 'ml-0'}`}>
            <FaBars onClick={toggle}/>
          </div>
        </div>
        <NavLink
          className="flex items-center text-white px-[15px] py-[20px] gap-[15px] transition-all duration-500 hover:bg-gray-800"
          to="/"
        >
          <HomeIcon className="text-[20px]"/>
          <div className={`${open ? 'block' : 'hidden'} text-[20px]`}>
            DASHBOARD
          </div>
        </NavLink>
        {/* 其他导航项可参照上述写法添加 */}
      </div>
    </div>
  );
};

export default SideBar;

额外补充了items-center让元素垂直居中，以及hover:bg-gray-800给导航项加hover效果，提升交互体验。

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