如何使用 Material UI 将基本选择自定义为芯片选择？

发布于 2025-01-11 14:28:11 字数 1020 浏览 0 评论 0原文

我想使用 Material UI 实现以下滤镜芯片。

目前，我正在使用提供的材质组件进行基本选择（https://mui.com/components/selects/)

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

它看起来像这样。

如何将提供的 BasicSelect 转换为类似芯片的过滤器（我是材料组件定制的新手）。可能需要使用覆盖。但我不知道从哪里开始。

原文

I would like to achieve the following filter chips using material UI.

Currently, I am using the provided material component for basic select (https://mui.com/components/selects/)

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

And it looks like this.

How do I convert the provided BasicSelect to a chip-like filter (I'm new to customisation for material components). Probably need to use overrides. But I'm not sure where to begin.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

儭儭莪哋寶赑 2025-01-18 14:28:11

您可以查看该组件的 API 文档，并在其中添加自定义 CSS 规则。

import { withStyles } from "@material-ui/styles";

const ReactComponent = ({classes})
=> { 
return (
<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
            className={classes.Style1}
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl> )

}

export default withStyles(theme => ({
    style1: {
        "&.MuiInputLabel-root": {
      color: "red"
    },

}
}))(ReactComponent)

You can look at the API docs for the component and add custom CSS rules there.

import { withStyles } from "@material-ui/styles";

const ReactComponent = ({classes})
=> { 
return (
<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
            className={classes.Style1}
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl> )

}

export default withStyles(theme => ({
    style1: {
        "&.MuiInputLabel-root": {
      color: "red"
    },

}
}))(ReactComponent)

回复收藏 0 原文

~没有更多了~