Add custom variants

[YuriyDyachkov]

I'm trying to add my own props option for a typography component. it works from a code point of view, but the typescript throws an error. Tell me how can I fix this?

[Munaf-Divan]

@YuriyDyachkov were you able to find the solutions to this? I am trying add a custom variant in button component. Could you please guide me on how we can do it?

[YuriyDyachkov]

@Munaf-Divan I can't. We have stopped using this library.

[yukiomoto]

Hi

I was able to fix the type error by doing something similar to this (#191 (comment)).

1. Extend the button theme:

<ThemeProvider value={{
  button: {
    valid: {
      variants: ['custom-variant'],
    },
    styles: {
      variants: {
        'custom-variant': {
          /* define all the colors */
          blue: {
            backgroud: "bg-blue-500",
            color: "text-white",
            shadow: "shadow-md shadow-blue-500/20",
            hover: "hover:shadow-lg hover:shadow-blue-500/40",
            focus: "focus:opacity-[0.85] focus:shadow-none",
            active: "active:opacity-[0.85] active:shadow-none",
          },
        },
      },
    },
  },
}} />

2. Create Button component wrapper:

'use client'
import { Button, ButtonProps } from '@material-tailwind/react'

interface Props extends Omit<ButtonProps, "variant"> {
  variant?:
  | "filled"
  | "outlined"
  | "gradient"
  | "text"
  | "custom-variant";
}

export default function CustomButton(props: Props) {
  /* eslint-disable  @typescript-eslint/no-explicit-any */
  return <Button {...(props as any)} />;
}

3. Use it in your component without a type error:

const SomeButton = () => <Button variant="custom-variant">Some Button</Button>

Since variant type is hard coded in the library, I think you need to create your own wrapper to override the variant type.

material-tailwind/packages/material-tailwind-react/src/types/components/button.ts

Line 13 in 1558739

export type variant = "filled" | "outlined" | "gradient" | "text";