Material-ui: [Select] O estilo é quebrado ao adicionar um className em SelectDisplayProps

Criado em 21 out. 2020 · 3Comentários · Fonte: mui-org/material-ui

Adicionar um className em SelectDisplayProps na verdade substitui seus classNames existentes

[x] O problema está presente na versão mais recente.
[x] Pesquisei os problemas deste repositório e acredito que não seja uma duplicata.

Comportamento Atual 😯

eu tenho um .

Comportamento esperado 🤔

Ele não deve substituir os classNames existentes, mas ser adicionado a eles.

Passos para reproduzir 🕹

Aqui você pode encontrar uma sandbox para ver o bug: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Passos:

Você está na caixa de areia. Na verdade, há um objeto em SelectDisplayProps :

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

Ao clicar no botão abaixo da entrada, ele mudará o SelectDisplayProps para indefinido, como se você não especificasse um.
Você pode ver, inspecionando o DOM, que quando não há SelectDisplayProps , há a classe material da IU padrão. Mas quando SelectDisplayProps é especificado, o className desaparece

Contexto 🔦

Desejo substituir o estilo do elemento que exibe o valor selecionado. O problema existe mesmo se eu mudar totalmente o estilo que estou tentando dar, então não acho que esteja relacionado.

Seu ambiente 🌎

| Tech | Versão |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| React | 16.13.1 |
| Navegador | Chrome - Versão 86.0.4240.75 (versão oficial) (64 bits) |
| TypeScript | 3.9.5 |

bug 🐛 Select good first issue

Fonte

Newpoki

Todos 3 comentários

@Newpoki Obrigado pelo relatório, posso confirmar o problema. O que você acha dessa correção?

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}
       >

Você quer trabalhar em uma solicitação pull? :)