Custom colors in Typescript projects cause constant log errors

[samhepburn-98]

The types for component colors do not allow for customisation.

• Added customColor to tailwind.config.ts
• Added customColor to valid array in MT Theme
• Added customColor to styles array in MT Theme

The component does accept the prop and render correctly, but these warnings appear constantly in the console.

I know these are warnings and not errors, but the console noise is incredibly annoying for every component to be clogging my logs with warnings telling me that a color that DOES exist, doesn't exist. (This is the same for other components too)

The prop type of color should allow for all custom values defined in valid and not log any errors.

I am using Next.js 14, with Tailwind 3.4.1

My tailwind.config.ts

import type { Config } from "tailwindcss";
import withMT from "@material-tailwind/react/utils/withMT";

const config: Config = {
    content: [
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        extend: {
            colors: {
                customColor: {
                    light: "#395363",
                    DEFAULT: "#08293C",
                    dark: "#051c2a",
                    contrast: "#ffffff"
                },
            },
        },
    },
    plugins: [],
};
export default withMT(config);

My Theme Provider:

"use client";

import { PropsWithChildren } from "react";
import { ThemeProvider } from "@material-tailwind/react";

const MTProvider = ({ children }: PropsWithChildren) => {
    const theme = {
        typography: {
            defaultProps: {
                variant: "bodyMedium",
                color: "inherit",
                textGradient: false,
                className: "",
            },
            valid: {
                colors: [
                    "customColor",
                ]
            },
            styles: {
                colors: {
                    "customColor": {
                        color: "text-customColor",
                    },
                }
            }
        }
    };

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

export default MTProvider;

My Typography component

"use client";

import { Typography as MtTypography } from "@material-tailwind/react";
import { PropsWithChildren } from "react";

const Typography = ({ children }: PropsWithChildren) => {
    return (
        <MtTypography
           color="customColor"
        >
            {children}
        </MtTypography>
    );
};

export default Typography;

[sajadevo]

@samhepburn-98 the issue is with PropTypes and we can't pass custom value to it this issue will be fixed on v3 since we've dropped the PropTypes library and only rely on the typescript types.