Material-ui: [Select] Style rusak saat menambahkan className di SelectDisplayProps

Dibuat pada 21 Okt 2020 · 3Komentar · Sumber: mui-org/material-ui

Menambahkan className di SelectDisplayProps sebenarnya menimpa classNames yang sudah ada

[x] Masalahnya ada di rilis terbaru.
[x] Saya telah mencari masalah dari repositori ini dan yakin bahwa ini bukan duplikat.

Perilaku Saat Ini 😯

Saya punya .

Perilaku yang Diharapkan 🤔

Ini seharusnya tidak menimpa classNames yang ada tetapi ditambahkan ke dalamnya.

Langkah-langkah untuk Mereproduksi 🕹

Di sini Anda dapat menemukan kotak pasir untuk melihat bug: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Langkah:

Anda berada di kotak pasir. Sebenarnya ada objek di SelectDisplayProps :

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

Saat mengklik Tombol di bawah input, itu akan mengubah SelectDisplayProps menjadi tidak terdefinisi, seolah-olah Anda tidak menentukannya.
Anda dapat melihat dengan memeriksa DOM bahwa ketika tidak ada SelectDisplayProps , ada kelas default UI material. Tapi ketika SelectDisplayProps ditentukan, className menghilang

Konteks 🔦

Saya ingin mengganti gaya elemen yang menampilkan nilai pemilihan. Masalahnya ada bahkan jika saya benar-benar mengubah gaya yang saya coba berikan, jadi saya tidak berpikir itu terkait.

Lingkungan Anda 🌎

| Teknologi | Versi |
| ----------- | ------- |
| Materi-UI | v4.11.0 |
| Bereaksi | 16.13.1 |
| Browser | Chrome - Versi 86.0.4240.75 (Build Resmi) (64-bit) |
| TypeScript | 3.9.5 |

bug 🐛 Select good first issue

Sumber

Newpoki

Semua 3 komentar

@Newpoki Terima kasih atas laporannya, saya dapat mengonfirmasi masalahnya. Apa pendapat Anda tentang perbaikan ini?

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

Apakah Anda ingin mengerjakan permintaan tarik? :)