material-ui [选择]禁用的组件看起来很奇怪

hc8w905p  于 23天前  发布在  其他
关注(0)|答案(9)|浏览(19)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

当前行为 😯

在我的项目中,Select组件在设置'disabled'属性时显示了多余的元素。这个问题只在设置了'multiple'属性时出现。可见的多余元素对应于选定的值,应该不可见。
我正在使用最新的mui版本(mui-material 5.9.0, emotion 11.9.3)在一个electron应用程序(Chrome浏览器)中。
这是没有设置'disabled'的Select组件:

这是设置了'disabled'的Select组件:

预期行为 🤔

组件应该被禁用,不应该有多余的元素可见。禁用的样子应该是这样的:

上面的照片是从一个在线沙箱拍摄的,它按预期工作: https://codesandbox.io/s/selectvariants-demo-material-ui-forked-yjetry?file=/demo.js

重现步骤 🕹

步骤:

  1. 查看提供的沙箱链接中的"好"示例
  2. 建议为什么这个例子在我的环境中无法正常工作。我多次重新安装了mui库,但问题仍未解决。

上下文 🔦

  • 无响应*

你的环境 🌎

yzckvree

yzckvree1#

我无法在您分享的沙盒上复现它!

8fq7wneg

8fq7wneg2#

@raesche 对你的项目进行了分叉,并尝试禁用。
你添加了带有多个属性为真的截图,并且与单个选择共享了代码沙箱链接。
请至少分享与你想解释的相同场景的代码沙箱。
然而,我尝试了一下,问题没有重现 - Codesandbox

oxcyiej7

oxcyiej73#

看起来这个bug报告没有足够的信息让我们中的一个人复现它。
请提供一个CodeSandbox(https://material-ui.com/r/issue-template-latest),一个指向GitHub仓库的链接,或者提供一个最小的代码示例来重现问题。
以下是提供最小示例的一些提示:https://stackoverflow.com/help/mcve

5lwkijsr

5lwkijsr4#

由于问题缺少关键信息且已处于7天不活跃状态,因此已被自动关闭。如果您希望看到问题重新打开,请提供缺失的信息。

nue99wik

nue99wik5#

我无法在任何沙箱中复现这个问题,这就是为什么我无法提供一个带有问题的沙箱链接。然而,这个问题仍然存在于我的项目(它是一个electron应用程序)中,我无法解决它(即使从MUI网站复制示例代码并更新到最新版本)。
同时,我发现这个多余的元素是某种程度上没有正确隐藏的标签。我在React组件中的解决方法如下:

qlzsbp2j

qlzsbp2j6#

为什么不忽略设置输入的显示样式,而是在需要时使用条件渲染来显示输入元素。
示例:

const [someState, setState] = useState(false);

return (
  <div>
    {someState && <input />}
  </div>
);

如果您在项目中需要帮助,请给我发电子邮件!我会帮助您找出问题所在。

b5buobof

b5buobof7#

亲爱的Haneen,

谢谢,但这个问题与需要显示或隐藏的单个无关。有问题的是MUI(请参见https://mui.com/material-ui/react-select/)中的组件的一部分,当组件被禁用时,它应该自动隐藏。这个方法在我找到的每个沙箱和示例中都有效,但出于某种原因,在我的electron应用程序中不起作用。

在组件内搜索有问题的并将其display属性设置为'none'只是解决了我项目中的问题的临时解决方案。

xa9qqrwz

xa9qqrwz8#

非常确定这是一个CSS覆盖问题。请检查您的全局CSS,您可能在某个地方有input:disabled的透明度> 0。

iecba09b

iecba09b9#

非常感谢minh-le-jh的回复。该项目已经过时,使用了我的解决方法,但我下次在处理它时会尝试一下。

最好的祝愿

相关问题