Material-ui: [Seleccionar] El estilo se rompe al agregar un nombre de clase en SelectDisplayProps

Creado en 21 oct. 2020 · 3Comentarios · Fuente: mui-org/material-ui

Agregar un className en SelectDisplayProps realidad anula sus classNames existentes

[x] El problema está presente en la última versión.
[x] He buscado las ediciones de este repositorio y creo que esto no es un duplicado.

Comportamiento actual 😯

tengo un .

Comportamiento esperado 🤔

No debe anular los classNames existentes, sino agregarlos.

Pasos para reproducir 🕹

Aquí puede encontrar una caja de arena para ver el error: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Pasos:

Estás en la caja de arena. En realidad, hay un objeto en SelectDisplayProps :

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

Al hacer clic en el botón debajo de la entrada, cambiará SelectDisplayProps a indefinido, como si no hubiera especificado uno.
Puede ver al inspeccionar el DOM que cuando no hay SelectDisplayProps , existe la clase predeterminada de IU de material. Pero cuando se especifica SelectDisplayProps , el className desaparece

Contexto 🔦

Quiero anular el estilo del elemento que muestra el valor de selección. El problema existe incluso si cambio totalmente el estilo que estoy tratando de dar, así que no creo que esté relacionado.

Tu entorno 🌎

| Tech | Versión |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| Reaccionar | 16.13.1 |
| Navegador | Chrome: versión 86.0.4240.75 (compilación oficial) (64 bits) |
| TypeScript | 3.9.5 |

bug 🐛 Select good first issue

Fuente

Newpoki

Todos 3 comentarios

@Newpoki Gracias por el informe, puedo confirmar el problema. ¿Qué opinas de esta solución?

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

¿Quieres trabajar en una solicitud de extracción? :)