Material-ui: [Auswählen] Der Stil wird unterbrochen, wenn ein Klassenname in die SelectDisplayProps eingefügt wird

Erstellt am 21. Okt. 2020 · 3Kommentare · Quelle: mui-org/material-ui

Das Hinzufügen eines Klassennamens in SelectDisplayProps überschreibt tatsächlich die vorhandenen Klassennamen

[x] Das Problem ist in der neuesten Version vorhanden.
[x] Ich habe die Probleme dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist.

Aktuelles Verhalten 😯

Ich habe ein .

Erwartetes Verhalten 🤔

Es sollte die vorhandenen Klassennamen nicht überschreiben, sondern ihnen hinzugefügt werden.

Schritte zum Reproduzieren 🕹

Hier finden Sie eine Sandbox, um den Fehler zu sehen: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Schritte:

Du bist auf dem Sandkasten. Es gibt tatsächlich ein Objekt in SelectDisplayProps :

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

Wenn Sie auf die Schaltfläche unter der Eingabe klicken, wird SelectDisplayProps in undefiniert geändert, als hätten Sie keine angegeben.
Wenn Sie das DOM überprüfen, können Sie feststellen, dass die Standardklasse der Material-Benutzeroberfläche vorhanden ist, wenn kein SelectDisplayProps vorhanden ist. Wenn jedoch SelectDisplayProps angegeben wird, verschwindet der Klassenname

Kontext 🔦

Ich möchte den Stil des Elements überschreiben, das den Auswahlwert anzeigt. Das Problem besteht auch dann, wenn ich den Stil, den ich zu geben versuche, völlig ändere, also denke ich nicht, dass er damit zusammenhängt.

Ihre Umgebung 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| Reagiere | 16.13.1 |
| Browser | Chrome - Version 86.0.4240.75 (offizieller Build) (64-Bit) |
| TypeScript | 3.9.5 |

bug 🐛 Select good first issue

Quelle

Newpoki

Alle 3 Kommentare

@Newpoki Danke für den Bericht, ich kann das Problem bestätigen. Was denkst du über dieses Update?

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

Möchten Sie an einer Pull-Anfrage arbeiten? :) :)

oliviertassinari am 22. Okt. 2020

Ich würde es gerne versuchen. Kannst du es mir zuweisen?

reedanders am 22. Okt. 2020

👍1

Hallo,
Entschuldigung für die späte Antwort, ich war an meinem Arbeitsplatz: heat_smile:

Ich bin froh, dass es ein echtes Problem war und nicht aus meinem Kopf, und dass es behoben wird: D.

Danke @reedanders für die PR.

Newpoki am 22. Okt. 2020

🎉1

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen