为什么反应HeroIcons不带颜色？

Question

我试图使用一个英雄图标从英雄人物，在一个反应项目。

import React, { useState } from 'react';
import { MenuIcon, XIcon } from '@heroicons/react/solid';
export const Sidebar = () => {
  const [showSidebar, setShowSidebar] = useState<boolean>(false);
  return (
    <div
      className="flex justify-between items-center 
        p-2 
        m-auto"
    >
      {showSidebar ? (
        <div>
          <XIcon
            onClick={() => setShowSidebar(!showSidebar)}
            className="h-5 w-5 text-white cursor-pointer"
          />
        </div>
      ) : (
        <div>
          <MenuIcon onClick={() => setShowSidebar(!showSidebar)} className="h-5 w-5 text-white" />
        </div>
      )}
      <div
        className={`top-0 left-0 w-[45vw] bg-menubar  p-10 pl-20 text-white fixed h-full z-40 ${
          showSidebar ? 'translate-x-0 ' : 'translate-y-full'
        }`}
      >
        <h2 className="mt-5 text-2xl font-semibold text-white">I am a sidebar</h2>
      </div>
    </div>
  );
};

我在有条件地展示一个侧边栏。XIcon正在我的领地里闲逛。

​

​

但它不带任何颜色。

Answer 1

不如尝试使用fill-white而不是text-white，例如：

 <XIcon
    onClick={() => setShowSidebar(!showSidebar)}
    className="h-5 w-5 fill-white cursor-pointer"
 />