How to configure the Progress Component for own colors

[denislutz]

Hi Guys,

thx a lot for your work. We are greatly using your library, but we have our own tw colors configured in the tailwind config.

Now we want to use the Progress Component but struggle to set our colors to it, since your colors are a hard coded on the types level and even in the doc we can not understand how to reconfigure it for our tw config?

Pls whow a small sample how to override the theme?

We have TS and Vite.js.

Thanks a lot in advance.

[sajadevo]

Hey there,

You can add new color for components using the following way:

const theme = {
  button: {
    valid: {
      colors: ["primary"],
    },
    styles: {
      variants: {
        filled: {
          primary: "bg-primary text-white",
        },
        gradient: {
          primary: "bg-primary text-white",
        },
        outlined: {
          primary: "border-primary text-primary",
        },
        text: {
          primary: "text-primary",
        }
      }
    }
  },
};

For other components check their theme object structure and example on each component page there is a title named theme customization. Button Theme Customization

[denislutz]

Hi @sajadevo, thx so much for your reply. I think I found it: ThemeProvider Here I can pass a value object which is then your theme, that you show as sample? Please mention this in the doc, this is not really clear, if some one does not now that you can pass the custom config to the theme provider. My problem was that I didnt know where to pass the configured theme, its never mentioned :-).

Thanks a lot....

[sajadevo]

Sure we'll improve that more.

[cserb]

I still don't get it to be honest. What I want is to add a color say #222 and give a name myColor and if I do that in the tailwind.config.ts it's complaining about the type (also not working) when doing <Typography color="myColor">My Text</Typography>

[denislutz]

Same here it still did not work for me, I ended up overriding things by direct classname attribute. As mentioned above the planned way is the theme provider .My last though was: there is a merge method internally that brings your css and the framework css together, there might be a bug, or I still did something wrong on configuration. Pls tell me if you get that working.

[cserb]

I honestly didn't tried too long. I have very little patience for something that is supposed to be basic but then turns out to be quite some work. So I did the same as you and used the className attribute.