How do I customize my Material Tailwind UI Carousel?

  Kiến thức lập trình

I’ve been working on my carousel using Material Tailwind and it works great! The only issue that I am having is that some of the projects in my carousel have a white background in contrast to the white arrows that the carousel defaults too. I want to continue using the material carousel, but I cannot figure out how to change the white arrows and navigation at the bottom. Does anyone have any experience with customizing the Material Tailwind theme? When I look at the docs they seem to have a way to customize themes but it is not making sense to me currently.

Here is the code for my Carousel so far

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>
  );
}

I have tried to add the IconButton inside of the Carousel using the prevArrow and nextArrow props, but it has done nothing but remove the arrow entirely.

LEAVE A COMMENT