Material-ui: [Select] Le style est interrompu lors de l'ajout d'un nom de classe dans SelectDisplayProps

Créé le 21 oct. 2020 · 3Commentaires · Source: mui-org/material-ui

L'ajout d'un nom de classe dans le SelectDisplayProps remplace en fait ses noms de classe existants

[x] Le problème est présent dans la dernière version.
[x] J'ai recherché les problèmes de ce référentiel et je pense que ce n'est pas un doublon.

Comportement actuel 😯

j'ai un .

Comportement attendu 🤔

Il ne doit pas remplacer les noms de classe existants mais leur être ajouté.

Étapes à suivre pour reproduire 🕹

Ici vous pouvez trouver un bac à sable pour voir le bogue: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Pas:

Vous êtes sur le bac à sable. Il y a en fait un objet dans le SelectDisplayProps :

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

En cliquant sur le bouton sous l'entrée, cela changera le SelectDisplayProps en indéfini, comme si vous n'en aviez pas spécifié un.
Vous pouvez voir en inspectant le DOM que lorsqu'il n'y a pas de SelectDisplayProps , il y a la classe par défaut de l'interface utilisateur matérielle. Mais lorsque le SelectDisplayProps est spécifié, le nom de classe disparaît

Contexte 🔦

Je souhaite remplacer le style de l'élément qui affiche la valeur de sélection. Le problème existe même si je change totalement le style que j'essaie de donner, donc je ne pense pas que ce soit lié.

Votre environnement 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| React | 16.13.1 |
| Navigateur | Chrome - Version 86.0.4240.75 (version officielle) (64 bits) |
| TypeScript | 3.9.5 |

bug 🐛 Select good first issue

Source

Newpoki

Tous les 3 commentaires

@Newpoki Merci pour le rapport, je peux confirmer le problème. Que pensez-vous de ce correctif?

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

Voulez-vous travailler sur une pull-request? :)