[英]How to customize Autocomplete tag - Material UI
I'm using autocomplete of material ui and this is what default tag looks like我正在使用材料 ui 的自动完成功能,这就是默认标签的样子
I want to customize tag like this.我想自定义这样的标签。
How can i do that?我怎样才能做到这一点? Thank you.
谢谢你。
<Autocomplete
disableCloseOnSelect={true}
multiple
options={this.options}
getOptionLabel={options => options.title}
value={this.state.value}
onChange={(e, techs) => {
this.newValue(techs);
}}
renderInput={params => (
<TextField
{...params}
variant="outlined"
placeholder={Technology}
fullWidth
/>
)}
></Autocomplete>
The renderTags
prop from the Autocomplete API docs: https://material-ui.com/api/autocomplete/来自 Autocomplete API 文档的
renderTags
道具: https : renderTags
The "tags" are Material UI Chips
https://material-ui.com/components/chips/ so you can style an individual Chip component or variants to your liking and then override the default tags for Autocomplete. “标签”是 Material UI
Chips
https://material-ui.com/components/chips/,因此您可以根据自己的喜好设置单个芯片组件或变体的样式,然后覆盖自动完成的默认标签。
Your styling for the chip would look something like你的芯片样式看起来像
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
export const useStyles = makeStyles((theme) => ({
root: {
borderRadius: 0,
color: labelColor,
boxSizing: 'border-box',
border: '1px solid',
borderColor: '#bddaff',
}
}));
;
const MyChip = (props) => {
const classes = useStyles();
return (
<Chip
className={classes.root}
{...props}
/>
);
};
And then you override the default chips然后你覆盖默认筹码
<Autocomplete
getOptionLabel={(option) => option.title}
label
placeHolder
multiple
openOnFocus
renderInput={(params) => <TextField {...params} label={label} placeholder={placeHolder} />}
renderTags={(tagValue, getTagProps) => {
return tagValue.map((option, index) => (
<MyChip {...getTagProps({ index })} label={option.title} />
));
}}
{...rest}
/>
);
You can use the tag
CSS class to customize the tags as shown below.您可以使用
tag
CSS 类来自定义标签,如下所示。
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { withStyles } from "@material-ui/core/styles";
const CustomAutocomplete = withStyles({
tag: {
backgroundColor: "#a0a",
height: 24,
position: "relative",
zIndex: 0,
"& .MuiChip-label": {
color: "#fff"
},
"& .MuiChip-deleteIcon": {
color: "red"
},
"&:after": {
content: '""',
right: 10,
top: 6,
height: 12,
width: 12,
position: "absolute",
backgroundColor: "white",
zIndex: -1
}
}
})(Autocomplete);
export default function Tags() {
return (
<div style={{ width: 500 }}>
<CustomAutocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
margin="normal"
fullWidth
/>
)}
/>
</div>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 },
// ... plus many more
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.