React ボタンを押すと開閉するサイドバーの作成で、SVGの色が変えられない

Question

実現したいこと

ReactでWebアプリ(勉強/個人用)を作成しています。
ボタンを押したらサイドバーが開閉するものを作成したいです。
(ChatGPTのサイドバーのようなもの)

発生している問題・分からないこと

サイドバー開閉用のボタンの色が変更出きません。
IconButtonを作成して、Iconを指定するようにしています。
アドバイスいただけないでしょうか。

該当のソースコード

import { useState } from "react";

// icon
import { LuListTodo } from "react-icons/lu";
import { MdKeyboardDoubleArrowLeft } from "react-icons/md";
import { MdKeyboardDoubleArrowRight } from "react-icons/md";
import IconButton from "./components/ui/IconButton"

export default function AppLayout({ children }) {
    const [isVisible, setIsVisible] = useState(true);

    const onClickSwitchVisible = () => {
        setIsVisible(!isVisible);
    };

    return (
        <div className="flex h-screen">
            {/* aside: 開閉可能 */}
            {isVisible && (
                <aside className="w-64 border-r border-gray-300 hidden md:block lg:w-64 md:w-48 sm:w-40" style={{ padding: '1rem', position: 'relative' }}>
                    <div className="flex flex-col items-center justify-center relative">
                        {/* 閉じるボタン */}
                        <div className="self-end mb-2">
                            <IconButton
                                icon={() => <MdKeyboardDoubleArrowLeft className="text-2xl text-black"  />}
                                onClick={onClickSwitchVisible}
                                className="p-2 bg-white text-black rounded-full"
                            />
                        </div>
                        <GrowNav />
                    </div>

                    {/* page nav : page毎のnavigation */}
                </aside>
            )}
            {/* asideが閉じているとき、開くボタンを表示 */}
            {!isVisible && (
                <div className="w-15 hidden md:flex items-start justify-center border-r border-gray-300" style={{ padding: '1rem 0' }}>
                    <IconButton
                        icon={() => <MdKeyboardDoubleArrowRight className="text-2xl" style={{ color: 'black' }} />}
                        onClick={onClickSwitchVisible}
                        className="flex items-center justify-center p-2 rounded-full aspect-square w-10 h-10 bg-white text-black"
                    />
                </div>
            )}
            <main className="flex-1 p-4 overflow-auto">
                {children}
            </main>
        </div>
    )
}

// 共通
function GrowNav() {
    return (
        <div className="border-b border-gray-300" style={{ paddingBottom: '1rem', marginBottom: '1rem' }}>
            <h1 className="text-lg font-semibold" style={{ marginBottom: '2rem' }}> grow nav </h1>
            <nav className="flex gap-2">
                <IconButton to="/todo" icon={() => <LuListTodo className="text-2xl" />} />
                <IconButton to="/todo" icon={() => <LuListTodo className="text-2xl" />} />
            </nav>
        </div>
    )
}

import { Link } from "react-router-dom";

export default function IconButton({
  icon: Icon, label = "", to = "", onClick = null, className = "", type = "button"
}) {
  const content = (
    <>
      {Icon && <Icon />}
      {label && <span>{label}</span>}
    </>
  );

  if (to) {
    return (
      <Link to={to} className={`flex items-center justify-center ${className}`}>
        {content}
      </Link>
    );
  }

  return (
    <button
      onClick={onClick}
      type={type}
      className={`flex items-center justify-center p-2 rounded-full aspect-square w-10 h-10 ${className}`}
    >
      {content}
    </button>
  );
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

下記試しました。

① icon={() => }の設定

    <IconButton
                                icon={() => <MdKeyboardDoubleArrowLeft className="text-2xl text-black"  />}
                                onClick={onClickSwitchVisible}
                                className="p-2 bg-white text-black rounded-full"
                            />

② icon={() => <icon style ={{color: 'black' }}

       <IconButton
                                icon={() => <MdKeyboardDoubleArrowLeft className="text-2xl" style={{ color: 'black' }} />}
                                onClick={onClickSwitchVisible}
                                className="p-2 bg-white rounded-full"
                            />

③ className="... text-black bg-white"

                     <IconButton
                                icon={MdKeyboardDoubleArrowLeft}
                                onClick={onClickSwitchVisible}
                                className="p-2 bg-white text-black rounded-full"
                            />

補足

特になし

Answer 1

index.cssの影響でした。
index.cssを修正して、実現できました。