如何自定义Material Tailwind UI Carousel的箭头与导航样式？

我用Material Tailwind做的Carousel轮播组件能正常运行，但部分轮播项的白色背景和默认的白色箭头、底部导航按钮冲突了。我想保留这个轮播组件，但改不了箭头和导航的样式，官方文档的主题自定义方法也没搞懂。之前试过用prevArrow和nextArrow props加IconButton，结果箭头直接消失了。以下是我的Carousel代码：

export default function Projects() {
  return (
    <div id="projects" className="projects-div">
      <h2 className="text-4xl relative top-10 text-center mb-20">Projects</h2>
      <div className="container">
        <Carousel transition={{ duration: 1 }} className="carousel rounded-xl">
          <a href="https://nixfixllc.com/">
            <img src="nfl.png" className="carousel-img w-full object-cover" />
          </a>

          <a href="https://mysticmeditation.netlify.app">
            <img src="mysticmeditation.png" className="carousel-img  w-full" />
          </a>
          <a href="https://cheery-pastelito-184353.netlify.app/">
            <img src="rockpapertank.png" className="carousel-img  w-full" />
          </a>
          <a href="https://rad-frangipane-ab7eaa.netlify.app/">
            <img src="pupbowl.png" className="carousel-img  w-full" />
          </a>
          <a href="https://astonishing-dolphin-abeb89.netlify.app/">
            <img src="qwirty.png" className="carousel-img  w-full" />
          </a>
          <a href="https://ornate-panda-539b81.netlify.app/">
            <img src="secondsite.png" className="carousel-img  w-full" />
          </a>
          <a href="https://vocal-zuccutto-ced39d.netlify.app/">
            <img src="strangersThings.png" className="carousel-img  w-full" />
          </a>
          <a href="https://papaya-praline-b8ce49.netlify.app/">
            <img src="tictactoe.png" className="carousel-img  w-full " />
          </a>
          <a href="https://amca.onrender.com/">
            <img src="amca.png" className="carousel-img  w-full " />
          </a>
          <a href="https://fabulous-klepon-630ec6.netlify.app/">
            <img src="firstsite.png" className="carousel-img  w-full " />
          </a>
        </Carousel>
      </div>
    </div>
  );
}

有没有懂Material Tailwind主题自定义的，给个解决方案？

1. 修复自定义箭头消失问题并修改样式 #

之前用prevArrow/nextArrow时箭头消失，是因为没正确绑定轮播的切换方法。按下面的写法来：

先导入需要的组件和图标：

import { IconButton } from "@material-tailwind/react";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";

然后给Carousel传入自定义箭头：

<Carousel
  transition={{ duration: 1 }}
  className="carousel rounded-xl"
  prevArrow={({ handlePrev }) => (
    <IconButton
      variant="filled"
      size="sm"
      className="!absolute left-4 top-1/2 -translate-y-1/2 bg-gray-800 text-white hover:bg-gray-700"
      onClick={handlePrev}
    >
      <ChevronLeftIcon className="h-5 w-5" />
    </IconButton>
  )}
  nextArrow={({ handleNext }) => (
    <IconButton
      variant="filled"
      size="sm"
      className="!absolute right-4 top-1/2 -translate-y-1/2 bg-gray-800 text-white hover:bg-gray-700"
      onClick={handleNext}
    >
      <ChevronRightIcon className="h-5 w-5" />
    </IconButton>
  )}
>
  {/* 你的轮播项内容 */}
</Carousel>

• 必须接收handlePrev/handleNext并绑定到点击事件，不然箭头点了没反应
• 用!absolute强制覆盖默认定位，确保箭头在轮播图上正确显示
• 自定义bg-gray-800这类颜色类，解决白色背景下的冲突

2. 修改底部导航指示器样式 #

直接用Tailwind的嵌套选择器覆盖默认样式，不用改组件结构：

<Carousel
  transition={{ duration: 1 }}
  className="carousel rounded-xl [&_.carousel-indicator]:bg-gray-400 [&_.carousel-indicator-active]:bg-gray-800"
>
  {/* 轮播项内容 */}
</Carousel>

• [&_.carousel-indicator] 选中所有未激活的导航点，设置背景色
• [&_.carousel-indicator-active] 选中当前激活的导航点，设置高亮色

3. 全局主题配置（统一所有Carousel样式） #

如果想一次性修改所有Carousel的默认样式，找到你的tailwind.config.js，添加如下配置：

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    carousel: {
      arrow: {
        backgroundColor: "#1f2937", // 箭头背景色
        color: "#ffffff", // 箭头图标颜色
        hoverBackgroundColor: "#374151", // 鼠标悬停时的背景色
      },
      indicator: {
        backgroundColor: "#9ca3af", // 未激活指示器颜色
        activeBackgroundColor: "#1f2937", // 激活指示器颜色
      },
    },
  },
  plugins: [],
});

配置完重启开发服务器，所有Carousel都会自动套用这些样式，不用逐个组件修改。

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