Learn how to customize the theme and styles for typography component, the theme object for typography component has three main objects:
A. The defaultProps object for setting up the default value for props of typography component.
B. The valid object for customizing the valid values for typography component props.
C. The styles object for customizing the theme and styles of typography component.
You can customize the theme and styles of typography component by adding Tailwind CSS classes as key paired values for objects.
interface TypographyStylesType {
defaultProps: {
variant: string;
color: string;
as: string;
textGradient: boolean;
className: string;
};
valid: {
variants: string[];
colors: string[];
};
styles: {
variants: {
h1: object;
h2: object;
h3: object;
h4: object;
h5: object;
h6: object;
lead: object;
paragraph: object;
small: object;
};
textGradient: object;
colors: object;
};
}import type { TypographyStylesType } from "@material-tailwind/react";const theme = {
typography: {
styles: {
variants: {
h1: {
fontSize: "text-5xl",
},
h2: {
fontSize: "text-4xl",
},
h3: {
fontSize: "text-3xl",
},
h4: {
fontSize: "text-2xl",
},
h5: {
fontSize: "text-xl",
},
h6: {
fontSize: "text-base",
},
lead: {
fontSize: "text-xl",
},
paragraph: {
fontSize: "text-base",
},
small: {
fontSize: "text-sm",
},
},
textGradient: {
bgClip: "bg-clip-text",
color: "text-transparent",
},
},
},
};