Hi I am having trouble changing the color of the text label in a MUI text field. I've managed to customise the border colors, and hover states (including the label) - just not the label color when not in hover state. I've tried various class names (including MuiInputBase-input) I found in the DOM as I did with the others, but to no avail. I also tried inputProps, but doesn't do anything either. Here is my code
<TextField
className="w-full my-2 "
id="outlined-basic"
label="Distance (miles)"
inputProps={{ sx: {color: '#F1F4F9'} }} <- this doesn't do anything
variant="outlined"
onChange={(e) => {setSearchParams({...searchParams, dist: e.target.value})} }
sx={{
// focused border color
"&& .Mui-focused .MuiOutlinedInput-notchedOutline": {
border: "1px solid #3B82F6",
},
// focussed label color
"& .css-1sumxir-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
color: "#3B82F6",
},
// normal border color
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #F1F4F9",
},
// normal label color - <- DOESN'T DO ANYTHING
"& .MuiInputBase-root-MuiOutlinedInput-root": {
color: "#F1F4F9"
},
}}
/>
Here, this is one way you can change the label color:
<TextField
className="w-full my-2 "
id="outlined-basic"
label="Distance (miles)"
InputLabelProps={{
sx: { color: "red", "&.Mui-focused": { color: "green" } },
}}
variant="outlined"
/>
Some tips:
Don't use/copy the generated classes from the DOM, because they can change!
.MuiFormLabel-root DO
.css-1sumxir-MuiFormLabel-root - DON'T
Double ampersant is not valid syntax
& .MuiFormLabel-root DO
&& .MuiFormLabel-root DON'T
Related
I was trying to change the hover effect of mui Auto Complete component options [inside the drop down]. But it seems I can not find the proper method to do so.
This is the hover effect I am trying to change : Image
I want to put my own color choice.
This is my code [sorry I am new to react. pretty bad codes] .
I tried many solution from stack overflow and other websites. They did not work for me [may be because I did not understand what they were saying].
I just want to change the hover effect color, when the mouse hovers over the options inside the select componenet. But I can not figure out how to do it.
This is my component Image
export default function SelectBox ( { ...props } ) {
return (
<Autocomplete
autoComplete={ true }
disablePortal
id="combo-box-demo"
options={ props.options }
ChipProps={ { backgroundColor: "green" } } // I have no idea what this does
sx={ {
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// no idea what this does too
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']" :
{
backgroundColor: "#FF8787",
},
} }
renderInput={ ( params ) => <TextField { ...params } label={ props.label } size='small' className='color-change'
sx={ {
width: "80%", backgroundColor: "#F1F1F1",
'.MuiOutlinedInput-notchedOutline': {
borderColor: '#C6DECD',
}, borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}, "&:hover": {
"&& fieldset": {
border: "1px solid green"
}
}
} } /> }
/>
);
}
Assuming that the goal is to customize the background color of options when being hovered, it seems that posted code just need to add :hover to a selector for the sx prop of Autocomplete.
Simplified example tested here: stackblitz
Change the following selector:
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']": {
backgroundColor: "#FF8787",
};
To add :hover so that it selects the hovered:
// 👇 Select the hover item here
'& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover': {
// 👇 Customize the hover bg color here
backgroundColor: "#FF8787",
};
Full example for Autocomplete, the original selector is kept in here so it customizes the selected item to match the hover effect, but this an optional approach.
export default function SelectBox(props) {
return (
<Autocomplete
autoComplete={true}
disablePortal
id="combo-box-demo"
options={props.options}
ChipProps={{ backgroundColor: "green" }}
sx={{
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// 👇 Select the hover item here
"& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover": {
// 👇 Customize the hover bg color here
backgroundColor: "hotpink",
},
// 👇 Optional: keep this one to customize the selected item when hovered
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover":
{
backgroundColor: "hotpink",
},
}}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
size="small"
className="color-change"
sx={{
width: "80%",
backgroundColor: "#F1F1F1",
".MuiOutlinedInput-notchedOutline": {
borderColor: "#C6DECD",
},
borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green",
},
"&:hover": {
"&& fieldset": {
border: "1px solid green",
},
},
}}
/>
)}
/>
);
}
I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>
If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>
=======================================
I am trying to change the background color of input type date when calender is open but unable to figure out the way. here is the code
dateInputRoot: {
'&:hover': {
backgroundColor: '#EBEBEB',
},
'&:active': {
backgroundColor: '#fff',
borderColor: '#2EFF22',
borderWidth: 1,
},
},
dateInput: {
border: 0,
},
<TextField
margin="dense"
type="date"
variant="outlined"
value={closeDate}
placeholder=""
fullWidth
style={{ paddingLeft: 0 }}
onChange={(e) => {
setCloseDate(e.target.value);
}}
className={classes.dateInputRoot}
InputProps={{
classes: { notchedOutline: classes.dateInput },
}}
/>
Problem is with active selector it changes the background only until I press the mouse button also no borderWidth is applying. i want to give background to white and some border when calendar is open.
Any help please
I want to display such a field
But even when the field is in focus the border remains intact and is not cut by the label
I am using material-UI TextField
You want to:
hide the label (I am doing it when you enter a value just to show you - you can remove it altogether if you'd like)
complete the border i.e. remove the legend (CSS)
relevant CSS:
legend { border:1px solid red; display:none; }
relevant js:
const styles = theme => ({
cssLabel: {
color: "green"
},
cssLabelHide: {
display: "none"
},
});
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange("name")}
margin="normal"
variant="outlined"
InputLabelProps={{
classes: {
root:
this.state.labelVisibility === true
? classes.cssLabel
: classes.cssLabelHide,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
},
inputMode: "numeric"
}}
/>
working stackblitz here
I am using material-ui ListItem to show my nav bar items.
I wrote the following CSS code to show styling when each item selected.
<List>
{routes.map(route => (
<Link to={route.path} key={route.name} style={{ textDecoration: "none" }}>
<ListItem button key={route.name} className={classes.listWrap}>
<ListItemText primary={route.name} className={classes.listItemText} />
</ListItem>
</Link>
))}
</List>;
CSS
listWrap: {
"&:hover": {
border: "1px solid #6c757d",
color: "black"
},
textAlign: "center",
"&:active": {
background: "#6c757d",
color: "black"
}
}
When I select one ListItem the styling doesn't work
how can we fix?
You can use focus instead of active.
listWrap: {
"&:hover": {
border: "1px solid #6c757d",
color: "black"
},
textAlign: "center",
"&:focus": {
background: "#6c757d",
color: "black"
}
}