Docs for customizable Admin components (#2030)

Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Co-authored-by: Thomas Dax <thomas.dax@vivid-planet.com>

docs/docs/admin-components/customization-and-styling.mdx

@@ -0,0 +1,127 @@
+---
+title: Customizaton and Styling
+sidebar_position: 1
+---
+
+import { Story } from "../../src/components/Story";
+
+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](/docs/comet-core-development/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](https://mui.com/system/getting-started/the-sx-prop/) for more details.
+
+```tsx
+<ContentOverflow sx={{ backgroundColor: "lime" }}>
+    {/* ... */}
+</ContentOverflow>
+```
+
+<Story path="customization-and-styling/StylingAComponentsRootElement.tsx" />
+
+### 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.
+
+```tsx
+<ContentOverflow
+    slotProps={{
+        clickableContent: {
+            disabled: true,
+        },
+    }}
+>
+    {/* ... */}
+</ContentOverflow>
+```
+
+<Story path="customization-and-styling/OverridingThePropsOfASlot.tsx" />
+
+### 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.
+
+```tsx
+<ContentOverflow
+    slotProps={{
+        openDialogIcon: {
+            sx: {
+                fontSize: 40,
+                color: "fuchsia",
+            },
+        },
+    }}
+>
+    {/* ... */}
+</ContentOverflow>
+```
+
+<Story path="customization-and-styling/StylingASlot.tsx" />
+
+## 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.
+
+```ts
+const theme = createCometTheme({
+    components: {
+        CometAdminContentOverflow: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: "lime",
+                },
+                openDialogIcon: {
+                    fontSize: 40,
+                    color: "fuchsia",
+                },
+            },
+        },
+    },
+});
+```
+
+<Story path="customization-and-styling/OverridingStylesOfAComponentGlobally.tsx" />
+
+### 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.
+
+```ts
+const theme = createCometTheme({
+    components: {
+        CometAdminContentOverflow: {
+            defaultProps: {
+                iconMapping: {
+                    openDialog: <Preview fontSize="large" />,
+                },
+            },
+        },
+    },
+});
+```
+
+<Story path="customization-and-styling/SettignDefaultPropsOfAComponent.tsx" />