mui
[docs] Demonstrate `TextField` customization using theme style overrides
- [x] 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
Netlify deploy preview
Bundle size report
Generated by :no_entry_sign: dangerJS against a5431766207eef1116872322fdedff0fbff74666
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 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!
