how to style single mui components like textfields
Hello everyone,
I'm having a really bad time trying to customize a textfield in react with material ui.
What I want to do is to be able change color of label, default border, input text and placeholder.
I know I can change the theme but i don't want that, I want to keep the original theme as it is but just override the components as I need.
Can anyone one guide me to a tutorial, blog, video, whatever, i just can't get this done, please.
7 Replies
im not familia with material ui, but according to their docs you can customize the defaults and override styles of a component
https://mui.com/material-ui/customization/theme-components/
Themed components - Material UI
You can customize a component's styles, default props, and more by using its component key inside the theme.
This is not helping me. thanks anyway
1) To change color of input text:
2) To change color of label:
3) To change color of placeholder:
4) To change color of the default border:
I found this solution online on stack overflow: https://stackoverflow.com/questions/52911169/how-to-change-the-border-color-of-material-ui-textfield
Disclaimer: This is not my solution and I am pretty sure it overrides MUI's default styling so use it at your own risk lol
Stack Overflow
How to change the border color of Material UI TextField
I can't seem to figure out how to change the outline color of an outlined variant TextField
I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps...
Hope this helps! 🙂