material-tailwind icon indicating copy to clipboard operation
material-tailwind copied to clipboard

Spinner custom theming

Open francescocretti opened this issue 2 years ago • 1 comments

Hi, sorry if this has already been asked, but I cant' find any thread or documentation. How can I customize the <Spinner /> color? I mean the rotating part of the spinner. I am aware that the circle color can be customized simply applying a text-[color] class to the element, but I can't find how to change the other part. Furthermore there's no custom theming documentation about the Spinner: would it be possible to add a custom theme?

francescocretti avatar Nov 21 '23 13:11 francescocretti

I actually managed to add custom colors to the <Spinner /> to my theme like this:

const spinner = {
  defaultProps: {
    color: 'primary',
  },
  valid: {
    colors: [
      'primary',
      'accent',
    ],
  },
  styles: {
    colors: {
      primary: {
        color: "text-primary-500",
      },
      accent: {
        color: "text-accent-500",
      },
    },
  },
};

export const customTheme = { spinner };

Maybe it's worth adding it to docs, together with the other custom theming props?

francescocretti avatar Nov 21 '23 14:11 francescocretti