Skip to main content

Customizaton and Styling

Comet Admin components are designed to be used similarly to MUI components. The APIs for styling, theming, overriding props, and replacing icons are similar to MUI.

Following are examples of customizing the ContentOverflow component. The examples should all be transferable to other components.

For instructions on how to build components that support these features, see Creating customizable Admin components.

Commonly used term: Slot​

A component is made up of HTML elements and other components. Each of these elements or components is referred to as a slot. Each of the component's slots can be accessed through its name to override styles and props. The outermost slot of a component is generally called root.

Customizing individial instances of a component​

Styling a component's root slot​

Overriding the styles of the root slot can be done using the sx prop.
See MUIs sx documentation for more details.

<ContentOverflow sx={{ backgroundColor: "lime" }}>
    {/* ... */}
</ContentOverflow>

Overriding the props of a slot​

The props of a slot can be accessed using the slotProps prop. In this case, we have a slot named clickableContent, a component based on MUI's ButtonBase. We can disable the button by setting the disabled prop to true on the slot.

<ContentOverflow
    slotProps={{
        clickableContent: {
            disabled: true,
        },
    }}
>
    {/* ... */}
</ContentOverflow>

Styling a slot​

Overriding the styles of a component's slot can be done by accessing its sx prop through the slotProps prop. In this case, we have a slot named openDialogIcon, which is a div that wraps an icon. Since the icon's size and color are inherited from the parent, we can override them by setting the styles in the slot's sx prop.

<ContentOverflow
    slotProps={{
        openDialogIcon: {
            sx: {
                fontSize: 40,
                color: "fuchsia",
            },
        },
    }}
>
    {/* ... */}
</ContentOverflow>

Customizing components globally​

Overriding styles of a component​

Overriding the styles of a component can be done in the theme using the component's styleOverrides. In this case, we override the background of the root slot and the font styles of the openDialogIcon slot.

const theme = createCometTheme({
    components: {
        CometAdminContentOverflow: {
            styleOverrides: {
                root: {
                    backgroundColor: "lime",
                },
                openDialogIcon: {
                    fontSize: 40,
                    color: "fuchsia",
                },
            },
        },
    },
});

Setting default props of a component​

Overriding the default props of a component can be done in the theme using the component's defaultProps. In this case, we replace the openDialog icon using the iconMapping prop.

const theme = createCometTheme({
    components: {
        CometAdminContentOverflow: {
            defaultProps: {
                iconMapping: {
                    openDialog: <Preview fontSize="large" />,
                },
            },
        },
    },
});