Learn how to customize the theme and styles for breadcrumbs component, the theme object for breadcrumbs component has two main objects:
A. The defaultProps object for setting up the default value for props of breadcrumbs component.
B. The styles object for customizing the theme and styles of breadcrumbs component.
You can customize the theme and styles of breadcrumbs component by adding Tailwind CSS classes as key paired values for objects.
interface BreadcrumbsStyleTypes {
defaultProps: {
separator: node;
fullWidth: boolean;
className: string;
};
styles: {
base: {
root: {
initial: object;
fullWidth: object;
};
list: object;
item: {
initial: object;
disabled: object;
};
separator: object;
};
};
}import type { BreadcrumbsStyleTypes } from "@material-tailwind/react";const theme = {
breadcrumbs: {
styles: {
base: {
separator: {
userSelcet: "select-none",
},
},
},
},
};