Material-ui: [Select] Стиль не работает при добавлении className в SelectDisplayProps

Созданный на 21 окт. 2020 · 3Комментарии · Источник: mui-org/material-ui

Добавление className в SelectDisplayProps фактически отменяет существующие classNames

[x] Проблема присутствует в последней версии.
[x] Я искал проблемы в этом репозитории и считаю, что это не дубликат.

Текущее поведение 😯

у меня есть .

Ожидаемое поведение 🤔

Он не должен переопределять существующие имена классов, а добавляться к ним.

Шаги по воспроизведению 🕹

Здесь вы можете найти песочницу, чтобы увидеть ошибку: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Шаги:

Вы в песочнице. На самом деле в SelectDisplayProps есть объект:

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

При нажатии на кнопку под полем ввода значение SelectDisplayProps изменится на undefined, как если бы вы его не указали.
Изучив DOM, вы можете увидеть, что, когда нет SelectDisplayProps , есть класс по умолчанию пользовательского интерфейса материала. Но когда указан SelectDisplayProps , className исчезает

Контекст 🔦

Я хочу переопределить стиль элемента, отображающего значение выбора. Проблема существует, даже если я полностью изменю стиль, который пытаюсь дать, поэтому я не думаю, что это связано.

Ваше окружение 🌎

| Технология | Версия |
| ----------- | ------- |
| Материал-UI | v4.11.0 |
| React | 16.13.1 |
| Браузер | Chrome - версия 86.0.4240.75 (официальная сборка) (64-разрядная версия) |
| TypeScript | 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}
       >

Вы хотите работать над pull-реквестом? :)