Material-ui: [選択] SelectDisplayPropsにclassNameを追加すると、スタイルが壊れます

作成日 2020年10月21日  ·  3コメント  ·  ソース: mui-org/material-ui

SelectDisplayPropsにclassNameを追加すると、実際には既存のclassNameが上書きされます

  • [x]この問題は最新リリースに存在します。
  • [x]このリポジトリの問題を検索し

現在の動作😯

私は持っています

期待される動作🤔

既存のclassNameをオーバーライドするのではなく、それらに追加する必要があります。

再現する手順🕹

ここでバグを確認するためのサンドボックスを見つけることができます: https

手順:

  1. あなたはサンドボックスにいます。 実際にはSelectDisplayPropsオブジェクトがあります:
SelectDisplayProps={{
    className: classes.selectDisplay
  }}
  1. 入力の下にあるボタンをクリックすると、指定しなかったかのように、 SelectDisplayPropsが未定義に変更されます。
  2. DOMを調べると、 SelectDisplayPropsがない場合、マテリアルUIのデフォルトクラスがあることがわかります。 ただし、 SelectDisplayPropsを指定すると、classNameが消えます。

コンテキスト🔦

選択値を表示する要素のスタイルを上書きしたい。 与えようとしているスタイルを完全に変えても問題はあるので、関係ないと思います。

あなたの環境🌎

| 技術| バージョン|
| ----------- | ------- |
| 素材-UI | v4.11.0 |
| React | 16.13.1 |
| ブラウザ| Chrome-バージョン86.0.4240.75(公式ビルド)(64ビット)|
| TypeScript | 3.9.5 |

bug 🐛 Select good first issue

全てのコメント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}
       >

プルリクエストに取り組みたいですか? :)

やってみたいです。 私に割り当ててもらえますか?

こんにちは、
返信が遅くなってすみません、私は仕事をしていました:sweat_smile:

嬉しいですそれは私の心からではなく本当の問題でした、そしてそれは修正されるつもりです:D

PRをしてくれた@reedandersに感謝します。

このページは役に立ちましたか?
0 / 5 - 0 評価