Error when trying to create a customized variant for Button

[longnguyennn]

Describe the bug

I'm getting error from Typescript when trying to create a customized variant for Button, following the official guide: https://react-bootstrap.github.io/getting-started/theming/

To Reproduce

Steps to reproduce the behavior:

Use Button with any variant other than the provided variants and you will get the error from Typescript.

Screenshots

[taion]

You'll need to override the ButtonProps interface to add your new variant.

[MichaelSchwabDev]

@taion I'm not sure if this is possible. Overriding of interfaces isn't possible unless I'm really missing something: https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file

And in their documentation it states:

Non-function members of the interfaces should be unique. If they are not unique, they must be of the same type. The compiler will issue an error if the interfaces both declare a non-function member of the same name, but of different types.

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

My attempts to override ButtonProps with a new or modified version have so far been unsuccessful. I also tried the method augmentation method at the end of the above article to no avail. Either the declaration is not picked up by the compiler or it says I cannot overwrite "variant".

[liorbentov]

@MichaelSchwabDev , did you manage solving it?

[AndreyKuleb]

Try <Button variant={''something" as any} />

[ericorruption]

You'll need to override the ButtonProps interface to add your new variant.

@taion Do you have an example of how to do this?

[kyletsang]

@taion Should we relax the type strictness for variant? Like variant?: string? This would reduce the friction in usage when creating custom classes or using sass $theme-colors.

[kosmiq]

This has been brought up in various ways before. @taion gave a reply here: #5047 when I suggested a way to do it.

[taion]

ugh, i have no idea. it's nice to get type checking here that works nicely with bootstrap default classes out of the box.

is there really no good way to override these?

[kosmiq]

@taion I wrestled with this a bit in a project (on version beta-16), and I ended up creating a custom Button-component that accepted other variants as props and then passing those as classNames to the <Button> component from react-bootstrap. With the <Button> setup with variant="primary" and the overriding that with CSS matching the variant passed to my custom component.

I had no real success in redeclaring the types for <Button> in a sane way that felt manageable over time (or at all, I don't remember the specifics).

It would've been very helpful to allow for non-bootstrap variants since we created quite a few of them in the end.

[kyletsang]

I was able to extend the ButtonProps by adding additional props, but I couldn't find a way to override an existing property type. I assume a lot of people would be struggling with this as it doesn't seem trivial.