Warning: Failed prop type: Invalid prop `color` of value `jungle` supplied to `MaterialTailwind.Button`, expected one of [ . . . ]

[iammburg]

I kept getting this warning, even though I had successfully added a custom color for my button filled component. Kindly help, how to remove those warning?

tailwind.config.js:

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        jungle: '#3B5249'
      },
    },
  },
  plugins: [],
});

App.jsx:

import React from "react";
import { ThemeProvider } from "@material-tailwind/react";
import { StickyNavbar } from "./components/StickyNavbar";

export default function App() {
    const theme = {
        button: {
            valid: {
                colors: ["jungle"],
            },
            styles: {
                variants: {
                    filled: {
                        jungle: {
                            backgroud: "bg-jungle",
                            color: "text-white",
                            focus: "focus:opacity-[0.85] focus:shadow-none",
                            active: "active:opacity-[0.85] active:shadow-none",
                        },
                    },
                },
            },
        },
    };

    return (
        <ThemeProvider value={theme}>
            <StickyNavbar />
        </ThemeProvider>
    );
}

StickyNavbar.jsx (component that contain my custom filled button):

import React from "react";
import {
    Navbar,
    MobileNav,
    Typography,
    Button,
    IconButton,
    Card,
} from "@material-tailwind/react";

export function StickyNavbar() {
    // codes
    return (
        // .................

        <Button
            variant="filled"
            size="sm"
            color="jungle"
            className="hidden lg:inline-block">
            <span>Help/Support</span>
        </Button>
    );
}

[dev-phantom]

this is because the material tailwind button color prop only accept these colors type color = | "white" | "black" | "blue-gray" | "gray" | "brown" | "deep-orange" | "orange" | "amber" | "yellow" | "lime" | "light-green" | "green" | "teal" | "cyan" | "light-blue" | "blue" | "indigo" | "deep-purple" | "purple" | "pink" | "red";

any other color other than this it won't be able to identify it here is a possible fix <Button variant="filled" size="sm" className="hidden lg:inline-block bg-jungle"> <span>Help/Support</span> </Button> you can also refer to this for more information

[iammburg]

this is because the material tailwind button color prop only accept these colors type color = | "white" | "black" | "blue-gray" | "gray" | "brown" | "deep-orange" | "orange" | "amber" | "yellow" | "lime" | "light-green" | "green" | "teal" | "cyan" | "light-blue" | "blue" | "indigo" | "deep-purple" | "purple" | "pink" | "red";

any other color other than this it won't be able to identify it here is a possible fix <Button variant="filled" size="sm" className="hidden lg:inline-block bg-jungle"> <span>Help/Support</span> </Button> you can also refer to this for more information

Well, thank you. All i need to do is add my custom class directly into className property