Material-ui: 在SelectDisplayProps中添加className时，[Select]样式损坏

创建于 2020-10-21 · 3评论 · 资料来源: mui-org/material-ui

在SelectDisplayProps添加className实际上会覆盖其现有的className

[x]最新版本中存在该问题。
[x]我搜索了此存储库的问题，并认为这不是重复的。

当前行为😯

我有一个。

预期行为🤔

它不应覆盖现有的className，而应将其添加到它们中。

重现步骤🕹

在这里您可以找到一个沙箱来查看错误： https :

脚步：

你在沙盒上。 SelectDisplayProps实际上有一个对象：

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

单击输入下方的按钮时，它将SelectDisplayProps更改为undefined，就像您未指定一个一样。
通过检查DOM可以看到，当没有SelectDisplayProps ，就存在材料UI默认类。但是当指定了SelectDisplayProps ，className消失了

上下文🔦

我想覆盖显示选择值的元素的样式。即使我完全改变了我要赋予的风格，问题仍然存在，所以我认为这无关紧要。

您的环境🌎

| 技术| 版本|
| ----------- | ------- |
| Material-UI | v4.11.0 |
| 反应| 16.13.1 |
| 浏览器| Chrome-版本86.0.4240.75（正式版本）（64位）|
| 打字稿| 3.9.5 |

bug 🐛 Select good first issue

资料来源

Newpoki

所有3条评论

@Newpoki感谢您的报告，我可以确认问题。您如何看待此修复程序？

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index eb58ecd1b3..2098d0f3b8 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -353,16 +353,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   return (
     <React.Fragment>
       <div
-        className={clsx(
-          classes.root, // TODO v5: merge root and select
-          classes.select,
-          classes.selectMenu,
-          classes[variant],
-          {
-            [classes.disabled]: disabled,
-          },
-          className,
-        )}
         ref={setDisplayNode}
         tabIndex={tabIndex}
         role="button"
@@ -376,6 +366,17 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         onBlur={handleBlur}
         onFocus={onFocus}
         {...SelectDisplayProps}
+        className={clsx(
+          classes.root, // TODO v5: merge root and select
+          classes.select,
+          classes.selectMenu,
+          classes[variant],
+          {
+            [classes.disabled]: disabled,
+          },
+          className,
+          SelectDisplayProps.className
+        )}
         // The id is required for proper a11y
         id={buttonId}
       >

您要处理请求吗？ :)

oliviertassinari 于 2020-10-22

我想尝试一下。你能把它分配给我吗？

reedanders 于 2020-10-22

👍1

你好，
抱歉，我的答复很晚，我在工作：sweat_smile：

很高兴这是一个真实的问题，不是我的想法，它将得到解决：D

感谢@reedanders的公关。

Newpoki 于 2020-10-22

🎉1

此页面是否有帮助？

0 / 5 - 0 等级