![](/img/trans.png)
[英]How can I customize the padding in a Material-UI autocomplete control?
[英]How to customize Autocomplete tag - Material UI
我正在使用材料 ui 的自动完成功能,这就是默认标签的样子
我想自定义这样的标签。
我怎样才能做到这一点? 谢谢你。
<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>
来自 Autocomplete API 文档的renderTags
道具: https : renderTags
“标签”是 Material UI Chips
https://material-ui.com/components/chips/,因此您可以根据自己的喜好设置单个芯片组件或变体的样式,然后覆盖自动完成的默认标签。
你的芯片样式看起来像
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}
/>
);
};
然后你覆盖默认筹码
<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}
/>
);
您可以使用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.