[docs] Demonstrate TextField customization using theme style overrides

[ZeeshanTamboli]

• I have followed (at least) the PR section of the contributing guide.

Closes #33387
Closes #33931

This PR is to demonstrate the customization of the TextField component using theme style overrides as raised in #33387. The developers will take a look at our documentation, which will show the correct way to do this. It is particularly useful to demonstrate it for the TextField component because it uses multiple sub-components within it (based on variant) and is not straightforward to override.

We showcase how to apply different styles to the default component and with the hover and focused states.

The colors may not look ideal in both light and dark modes. A better design can be suggested. cc @danilo-leal

Preview: https://deploy-preview-36805--material-ui.netlify.app/material-ui/react-text-field/#using-the-theme-style-overrides-api

[mui-bot]

Netlify deploy preview

• docs/data/material/components/text-fields/text-fields.md

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against a543176

[danilo-leal]

Sweet, thanks for working on this, @ZeeshanTamboli! Before continuing with the design tweaks, can I ask for you to set up dark mode to work on this? We should have demos that work on both modes instead of fixating it to one through a hard-coded dark bg 😬

[ZeeshanTamboli]

Before continuing with the design tweaks, can I ask for you to set up dark mode to work on this? We should have demos that work on both modes instead of fixating it to one through a hard-coded dark bg

@danilo-leal Done. The custom theme provider is inside our doc's theme provider, and due to the custom theme overriding the doc's one, the default Material UI text field styles were not getting applied appropriately on both modes. That's the reason I had hard-coded the background. But we can get the palette mode of our docs i.e the outer theme's mode and apply it in our custom theme. So, now, I used useTheme, to get the palette mode of our docs and removed hard-coded background.

[ZeeshanTamboli]

@danilo-leal Can you review this further?

[ZeeshanTamboli]

@danilo-leal I think you were about to review. Any updates on this?

[danilo-leal]

@ZeeshanTamboli Hey, yeah! Thanks for optimizing it for dark mode 🤝 I'll put in some time to go over this PR this week so we can get it out on the next release⎯thanks for the heads up!

[danilo-leal]

Looking great now! Thanks for the patience + effort 🤙