Material Ui 自动完成清除图标样式
Material Ui Automcomplete Clear icon style
我想更改清除图标的颜色,我试过 this 但它删除了带有静态图标的图标。我只想换个颜色。
<Autocomplete className={`${commonClasses.searchBarMobileScreen}`}
id="product-search"
forcePopupIcon={false}
classes={searchTextColor()}
options={options.sort((a, b) => -b.name.localeCompare(a.name))}
groupBy={(option) => option.cid}
getOptionLabel={(option) => (`${option.brand} ${option.name}`)}
renderInput={(params) => <SearchTextField
fullWidth
{...params}
label="Search..."
variant="outlined"
InputLabelProps={{
classes: {
root: commonClasses.whiteColor,
}
}}
/>}
/>
您可以向 clearIndicator 添加一些样式。全局 class 是 .MuiAutocomplete-clearIndicator
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
inputRoot: {
color: "blue",
fontFamily: "Roboto Mono",
backgroundColor: "#f2f2f2",
"& .MuiOutlinedInput-notchedOutline": {
borderWidth: "2px",
borderColor: "blue"
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderWidth: "2px",
borderColor: "blue"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "2px",
borderColor: "blue"
}
},
clearIndicator: {
color: "red"
}
}));
export default function ComboBox() {
const classes = useStyles();
return (
<Autocomplete
id="combo-box-demo"
classes={classes}
options={[1,2,3]}
forcePopupIcon
getOptionLabel={(option) => option.title}
renderInput={(params) => {
return (
<TextField
{...params}
label="Combo box"
variant="outlined"
fullWidth
/>
);
}}
/>
);
}
我想更改清除图标的颜色,我试过 this 但它删除了带有静态图标的图标。我只想换个颜色。
<Autocomplete className={`${commonClasses.searchBarMobileScreen}`}
id="product-search"
forcePopupIcon={false}
classes={searchTextColor()}
options={options.sort((a, b) => -b.name.localeCompare(a.name))}
groupBy={(option) => option.cid}
getOptionLabel={(option) => (`${option.brand} ${option.name}`)}
renderInput={(params) => <SearchTextField
fullWidth
{...params}
label="Search..."
variant="outlined"
InputLabelProps={{
classes: {
root: commonClasses.whiteColor,
}
}}
/>}
/>
您可以向 clearIndicator 添加一些样式。全局 class 是 .MuiAutocomplete-clearIndicator
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
inputRoot: {
color: "blue",
fontFamily: "Roboto Mono",
backgroundColor: "#f2f2f2",
"& .MuiOutlinedInput-notchedOutline": {
borderWidth: "2px",
borderColor: "blue"
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderWidth: "2px",
borderColor: "blue"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "2px",
borderColor: "blue"
}
},
clearIndicator: {
color: "red"
}
}));
export default function ComboBox() {
const classes = useStyles();
return (
<Autocomplete
id="combo-box-demo"
classes={classes}
options={[1,2,3]}
forcePopupIcon
getOptionLabel={(option) => option.title}
renderInput={(params) => {
return (
<TextField
{...params}
label="Combo box"
variant="outlined"
fullWidth
/>
);
}}
/>
);
}