- I'm facing a challenge in customizing the material ui css.
- Specifically, I want to set the border color of a textbox to red.
- The issue arises when the bottom border gets overwritten.
- Upon investigation, I discovered that the culprit is the class MuiInput-underline-904:before.
- Can anyone guide me on how to resolve this?
- Here is my code snippet and sandbox link for reference.
https://codesandbox.io/s/nk2ym81qwl
textField: {
flexBasis: 200,
border: "1px solid red"
}
<TextField
select
label="With Select"
className={classNames(classes.margin, classes.textField)}
value={this.state.weightRange}
onChange={this.handleChange("weightRange")}
InputProps={{
startAdornment: <InputAdornment position="start">Kg</InputAdornment>
}}
>
{ranges.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
The problem can be attributed to the following code:
.MuiInput-underline-904:before {
left: 0;
right: 0;
bottom: 0;
content: "\00a0";
position: absolute;
transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-bottom: 1px solid rgba(0, 0, 0, 0.42);
pointer-events: none;
}
<div class="MuiInputBase-root-913 MuiInput-root-900 MuiInput-underline-904 MuiInputBase-formControl-914 MuiInput-formControl-901 MuiInputBase-adornedStart-917">