Ensuring a Material-UI TextField is styled with a background-color on hover or focus has been a challenging task for me.
The code snippet for my component is shown below:
import React from "react";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import { styled } from "@mui/material/styles";
import { Input, InputBase, InputBaseProps } from "@mui/material";
export const SearchBar = styled(TextField)<TextFieldProps>(({ theme }) => ({
"& .MuiOutlinedInput-root": {
color: "var(--grey-30)",
marginRight: "10px",
"& .MuiOutlinedInput-notchedOutline": {
borderRadius: "30px",
borderColor: "var(--primary)",
borderSize: "1px",
height: "56px",
color: "var(--primary)",
},
"&:hover:not(.Mui-focused)": {
color: "var(--grey-30)",
borderColor: "var(--primary)",
backgroundColor: "var(--primary-99)",
borderRadius: "30px",
},
"&.Mui-focused": {
color: "var(--primary)",
backgroundColor: "var(--primary-99)",
borderRadius: "30px",
borderColor: "var(--primary)",
"& .MuiInputAdornment-outlined": {
color: "var(--primary)",
},
},
},
}));
Here is how I use the component:
<SearchBar
id="search-input"
placeholder="Search"
type="search"
InputProps={{
startAdornment: (
<InputAdornment position="start" color="var(--primary)">
<SearchIcon />
</InputAdornment>
),
}}
value={searchParam}
onChange={onSearch}
/>
Despite my efforts, I have not found a solution to this specific issue in my research. Any suggestions or guidance would be greatly valued.
I attempted to remove the
"& .MuiOutlinedInput-notchedOutline"notchedOutline to the hover and .MuiFocused classes, which resulted in the correct background appearance but caused the text and adornment to disappear.