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
MarkBoots
MarkBoots•12mo ago
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.
Hency
Hency•12mo ago
This is not helping me. thanks anyway
Bola.Ghaly
Bola.Ghaly•12mo ago
1) To change color of input text:
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
inputProps={{ style: { color: "red" } }}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
inputProps={{ style: { color: "red" } }}
/>
<TextField
id="standard-basic"
label="Standard"
variant="standard"
inputProps={{ style: { color: "red" } }}
/>
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
inputProps={{ style: { color: "red" } }}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
inputProps={{ style: { color: "red" } }}
/>
<TextField
id="standard-basic"
label="Standard"
variant="standard"
inputProps={{ style: { color: "red" } }}
/>
No description
Bola.Ghaly
Bola.Ghaly•12mo ago
2) To change color of label:
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
InputLabelProps={{ style: { color: "red" } }}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
InputLabelProps={{ style: { color: "red" } }}
/>
<TextField
id="standard-basic"
label="Standard"
variant="standard"
InputLabelProps={{ style: { color: "red" } }}
/>
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
InputLabelProps={{ style: { color: "red" } }}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
InputLabelProps={{ style: { color: "red" } }}
/>
<TextField
id="standard-basic"
label="Standard"
variant="standard"
InputLabelProps={{ style: { color: "red" } }}
/>
No description
No description
Bola.Ghaly
Bola.Ghaly•12mo ago
3) To change color of placeholder:
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
placeholder="hello"
sx={{
"input::placeholder": {
color: "red",
opacity: 1
}
}}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
placeholder="hello"
sx={{
"input::placeholder": {
color: "red",
opacity: 1
}
}}
/>
<TextField
id="standard-basic"
label="Standard"
variant="standard"
placeholder="hello"
sx={{
"input::placeholder": {
color: "red",
opacity: 1
}
}}
/>
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
placeholder="hello"
sx={{
"input::placeholder": {
color: "red",
opacity: 1
}
}}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
placeholder="hello"
sx={{
"input::placeholder": {
color: "red",
opacity: 1
}
}}
/>
<TextField
id="standard-basic"
label="Standard"
variant="standard"
placeholder="hello"
sx={{
"input::placeholder": {
color: "red",
opacity: 1
}
}}
/>
Bola.Ghaly
Bola.Ghaly•12mo ago
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
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
sx={{
"& .MuiOutlinedInput-notchedOutline": {
border: "2px dotted brown"
},

"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
border: "2px solid red"
}
}
}}
/>
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
sx={{
"& .MuiOutlinedInput-notchedOutline": {
border: "2px dotted brown"
},

"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
border: "2px solid red"
}
}
}}
/>
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...
No description
Bola.Ghaly
Bola.Ghaly•12mo ago
Hope this helps! 🙂
Want results from more Discord servers?
Add your server