Material-ui: يكون النمط [Select] معطلاً عند إضافة className في SelectDisplayProps

تم إنشاؤها على ٢١ أكتوبر ٢٠٢٠ · 3تعليقات · مصدر: mui-org/material-ui

إضافة className في SelectDisplayProps الواقع classNames الموجودة

[x] المشكلة موجودة في الإصدار الأخير.
[x] لقد بحثت في قضايا هذا المستودع وأعتقد أن هذه ليست نسخة مكررة.

السلوك الحالي 😯

انا املك .

السلوك المتوقع 🤔

لا ينبغي أن يتجاوز classNames الموجودة ولكن يتم إضافتها إليها.

خطوات إعادة إنتاج 🕹

هنا يمكنك العثور على صندوق رمل لرؤية الخطأ: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

خطوات:

أنت في وضع الحماية. يوجد كائن بالفعل في SelectDisplayProps :

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

عند النقر فوق الزر الموجود أسفل الإدخال ، سيتم تغيير SelectDisplayProps إلى غير محدد ، كما لو لم تحدد واحدًا.
يمكنك أن ترى من خلال فحص DOM أنه في حالة عدم وجود SelectDisplayProps ، فهناك فئة افتراضية لواجهة المستخدم المادية. ولكن عندما يتم تحديد SelectDisplayProps ، يختفي className

السياق 🔦

أريد تجاوز نمط العنصر الذي يعرض قيمة التحديد. المشكلة موجودة حتى لو قمت بتغيير الأسلوب تمامًا الذي أحاول تقديمه ، لذلك لا أعتقد أنه مرتبط.

بيئتك 🌎

| التقنية | الإصدار |
| ----------- | ------- |
| واجهة المستخدم المادية | v4.11.0 |
| رد فعل | 16.13.1 |
| المستعرض | Chrome - الإصدار 86.0.4240.75 (الإصدار الرسمي) (64 بت) |
| تيبسكريبت | 3.9.5 |

bug 🐛 Select good first issue

مصدر

Newpoki

ال 3 كومينتر

Newpoki شكرًا على التقرير ، يمكنني تأكيد المشكلة. ما رأيك في هذا الإصلاح؟

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

هل تريد العمل على طلب سحب؟ :)