Fancybox React Styling

Question

      <Fancybox
    options={{
      Carousel: {
        infinite: true,
      },
      Toolbar: {
        display: {
          left: ["infobar"],
          middle: [],
          right: ["zoomIn", "zoomOut", "close"],
        },
      },
      Thumbs: {
        type: "classic",
      },
    }}
  >
    <div className="">
      <IMG src={placeholder} alt="placeholder" />
      <IMG src={placeholder} alt="placeholder" />
      <IMG src={placeholder} alt="placeholder" />
    </div>
  </Fancybox>

I'm using fancybox with react. I have follwed offical docs and made react component. Here I import it and use. It works and I like the functionality and look. But how can I style thumbnails or anything in this regard?

Answer 1

Fancybox is written plain JS and you can style it as any 3rd party script - using CSS. Check out the source code for any of the demos here and use as a sample - https://fancyapps.com/showcase/