[docs] Add "Kitchen Sink" theme component customization example

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Traversing the docs is a bit cumbersome when you're custom styling a prebuilt component (i.e. Select):

It would be super instructive/helpful to see a giant JSON object showing all the potential values and all the deeply nested keys. Either with the default values explicitly defined in the theme.components or just some wacky custom thing where you literally alter every possible property for each component, and all its constituent parts.

So, like below, but, instead, with a customs value for all the possible keys/properties. It would be a lot like the default theme docs, where it shows the obejct, but, probably a bit larger due to all the different components. Or maybe it could be added to each component page, such that one could copy/paste it right into the components object, then tinker.

It would be super useful/instructive. I would use it by finding the component I was interested in styling, copy/pasting just that config into my theme, then, removing stuff until I had just what I needed to update.

Thanks!

export const theme = createTheme({
  
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        '@global': {
          html: {
            fontFamily,
          },
          ul: {
            margin: 0,
            padding: 0,
            listStyleType: 'none',
          },
        },
      },
    },

    MuiSlider: {
      styleOverrides: {
        root: {
          "& .MuiSlider-thumb.monkey": {
            color: "green",
            borderRadius: "1px",
          },
        },
        thumb: {
          color: "yellow",
          borderRadius: "1px",
        },
      },
    },
  },
})

Examples 🌈

No response

Motivation 🔦

Making the docs more "tinkerer" friendly vs. having to rely on written documentation.

Start by reviewing the existing theme and component customization documentation, especially the theme.components examples. Define a copy-pastable “Kitchen Sink” example that covers the available nested customization keys and component parts, then verify that the example is accurate and useful across the relevant component pages.