[docs] Customization playground - fix default theme values

[oliviertassinari]

Steps to reproduce

Link to live example: (required)

Steps:

• 1. Open https://mui.com/x/react-date-pickers/date-picker/#customization

Current behavior

MUI inc. theme

Expected behavior

Default Material UI theme

Context

#9581

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: qkzjdssef

[oliviertassinari]

More reviews on this:

• 2. I think the desktop should be the first option selected. I wouldn't expect more than 10% of the use to be about the static variant

• 3. The panel feels off for me, maybe it's about the elevation, the background color, or the rounding.

• 4. The code style is wrong, sometimes it's missing a closing brackets, sometimes a semicolon, sometimes it's the indentation

[oliviertassinari]

We discovered more opportunities with @noraleonte today:

• 5. When opening https://mui.com/x/react-date-pickers/date-picker/#customization, it shows:

The border definition is set twice, it's redundant:

    borderRadius: '2px',
    borderWidth: '1px',
    borderColor: '#2196f3',
    border: '1px solid',

would be simpler like this:

    border: '1px solid #2196f3',

• 6. Having an inspector like in the Chrome DevTools to select the element we want to customize:

could improve x2-5 the experience with the tool.

• 7. I'm confused about the code formating:

Shouldn't we be explicit about the nested selector behavior '&. ' as in the rest of the codebase. Also use the closing ; and , as in the rest of the codebase.