reactjs - 变体 ="filled"不适用于

转载 作者：行者123 更新时间：2023-12-05 05:07:06 24 4

我不知道为什么没有应用样式。谁能解决这个问题？

<FormControl className={classes.formControl} variant="filled">
  <InputLabel id="input-label">Multiple Select</InputLabel>
  <Select
    variant="filled"
    fullWidth={true}
    labelId="input-label"
    multiple
    value={value}
    onChange={event => setValue(event.target.value)}
    input={<Input />}
    renderValue={() => value.join(", ")}
  >
    <MenuItem value="AAAAA">
      <Checkbox checked={value.indexOf("AAAAA") !== -1} />
      <ListItemText primary="AAAAA" />
    </MenuItem>
    <MenuItem value="BBBBB">
      <Checkbox checked={value.indexOf("BBBBB") !== -1} />
      <ListItemText primary="BBBBB" />
    </MenuItem>
    <MenuItem value="CCCCC">
      <Checkbox checked={value.indexOf("CCCCC") !== -1} />
      <ListItemText primary="CCCCC" />
    </MenuItem>
  </Select>
</FormControl>

完整代码: https://codesandbox.io/s/select-multiple-tags-variant-filled-hc9y7

谁能帮帮我谢谢!

最佳答案

不要将变体添加到 FormControl，而是使用 mui 的 <OutlinedInput />组件而不是 <Input /> Select 上输入 Prop 的组件

<Select
  variant="filled"
  fullWidth={true}
  labelId="input-label"
  multiple
  value={value}
  onChange={event => setValue(event.target.value)}
  input={<OutlinedInput />}
  renderValue={() => value.join(", ")}
>

关于reactjs - 变体 ="filled"不适用于 <Select multiple>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59441456/

24 4 0

文章推荐： laravel - 时间戳使我的 phpunit 测试失败

文章推荐： laravel - Laravel Resource 中的附加数据

文章推荐： spring - com.mongodb.async.client.ClientSessionHelpe 没有从集群描述 ClusterDescription 选择服务器

文章推荐： r - 在 Windows 10 上安装没有管理员权限的 R Studio

• jquery - 从文件输入中获取文件名或文本 multiple=multiple

  我正在尝试设计我的输入:文件。以下 SO 问题让我完成了 95% 的任务。区别在于我使用的是 HTML5 multiple=multiple 属性。 How to style "input file"

• Python Pandas : Store multiple time series of variable length for multiple attributes for multiple users

  我一直在进行一项实验，其中多个调查参与者使用可穿戴技术聆听多首音乐来跟踪多条信息，两个例子是 BPM(心率)和 T(体温)。 目标是衡量每首音乐(以用户反馈为特征)对人类情感的影响。 目前，所有数据都

• PHP : multiple inputs into other multiple inputs

  我使用 jquery 添加/删除输入 我使用append为日期/收入添加多个Tr 我还使用另一个附加来添加多个 td 以获取同一日期 Tr 中的收入 我添加多个日期输入，并在此表中添加多个收入输入 我

• 安卓工作室 : Multiple APKs for Multiple Modules

  在 Android 中，有一种方法可以为项目中的所有模块生成签名的 APK。例如。我有以下项目 Project -- Library Module -- Module 1 -- Modul

• mysql - 数据库设计: How to query multiple to multiple table

  我有一个用于网站展示的系统。 展览数据可能来自差异表中的多个数据。 喜欢这个设计: Table [ExhibitionType] used for differentiate category. Ta

• ios - 什么是最佳实践 : Multiple UIViews or Multiple UIViewControllers

  关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve

• iOS : Handle multiple uilocalnotification with multiple same viewcontroller

  我正在使用 UILocalnotification...收到通知时，当应用程序处于事件模式时我打开 viewcontroller...但是如果同时收到多个通知...我如何打开多个 viewcontro

• PHP/MySQL : UPDATE multiples values with multiples WHERE

  我遇到的问题是一个策略浏览器游戏，它有 7 种类型的值。问题如下: 我在 $_POST 中获得了 7 个不同的值，包括从索引 unit_1 到索引 unit_7。这 7 个值是 0 到 20 之间的整

• python : How to search for multiple paterns in multiple files

  这个问题已经有答案了: Search Large Text File for Thousands of strings (3 个回答) 已关闭10 年前。 我想在多个文件上“grep”多个正则表达式。

• javascript - 大型数据集的单个

元素的替代方案

我经常对如何在我的应用程序中解决这个问题感到矛盾。我使用了很多选项，包括: 一个通用的多选 - 这是我最不喜欢和最很少使用的选项。我发现可用性非常糟糕，一个简单的误点击就会毁了你所有的辛勤工作。 “自

n1ql multiple unnest in select statement with multiple where 条件

以下是 couchbase 中的示例文档之一。 { "name":"abc", "friends":["a","b","c"], "bestfriends":["x","y","z"] }

php - Multiple LEFT JOINS with Multiple COUNT() 计算所有列

我有 4 张 table 。 表组 | ID | NAME | 1 Premium 2 Silver 表用户 | ID | group_id | NAME | 1

javascript - MongoDB : multiple indexes or multiple collections 哪个更好

我正在开发一个使用第三方服务(Facebook、Google 等)对用户进行身份验证的应用程序。我为每个用户提供一个内部 ID(uuid v4)，该 ID 与他们的第 3 方 ID 相关联。现在，我的

azure - 二头肌 : Creating multiple topics with multiple subscriptions

我是 bicep 新手，一直在努力实现 Bicep 脚本来部署具有许多主题和订阅的 Azure 服务总线。 我添加的每个主题都有可变数量的订阅(例如，通知主题可能有 3 个订阅，但分析主题可能有 2

azure - 二头肌 : Creating multiple topics with multiple subscriptions

我是 bicep 新手，一直在努力实现 Bicep 脚本来部署具有许多主题和订阅的 Azure 服务总线。 我添加的每个主题都有可变数量的订阅(例如，通知主题可能有 3 个订阅，但分析主题可能有 2

MYSQL数据库: How do I structure the database for multiple devices and multiple data?

我必须创建一个大型数据库。它将保存来自 100 多个设备的数据，并不断更新数据库。每 10 秒，每个设备都会更新数据库中的一行。是为每个设备数据建立一个单独的表还是将数据与设备 ID 放在同一个表中更

Android 内存泄漏 : Multiple instances of activity in multiple threads

我需要在 Activity 开始时显示“正在加载”进度对话框，然后在加载完成后显示一些内容。在我的 onresume 中，我有类似这样的代码: loadThread = true; Thread sh

JavaScript/Jquery : Multiple input value with multiple id

我有一个 html 表单 当我提交表单时，假设对于 id = 1，数量为 5 或 对于 id = 3，数量为 8。如何在java脚本或jquery中获取这些值并将这些信息提交到服务器？我

javascript - Mozilla 扩展 : Multiple States between multiple tabs

我正在创建一个 Mozilla 扩展程序，通过单击“转换按钮”(标签:转换)将网页内容转换为其他语言它的标签被转换为英文，以便单击该按钮(标签:英文)内容被转换为原始形式 我尝试为每个选项卡设置属性“

php - html + SQL 查询搜索

我正在尝试根据 进行搜索 我通过运行代码从 select 中获取值: for($i=0;$i= '$age_from' AND users.user_age = '$age_from' AND u

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
• JMeter 在响应断言中使用 span 标签的问题
• html - 在 :hover and :active? 上具有不同效果的 CSS 动画
• html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

• 控制请求并发数量：p-limit源码解读
• 手搓大模型Task01：LLama3模型讲解
• Blazor开发框架Known-V2.0.11
• 数据结构与算法之间有何关系？
• ConcurrentLinkedQueue详解(图文并茂)
• Filebeat
• GIS转码的秋招历程与踩坑经历
• "放开那代码让我来！"——Cursor帮你写代码的奇妙之旅
• fp16的累加误差有多大
• SaaS业务架构：业务能力分析

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com