SelectDisplayProps
にclassNameを追加すると、実際には既存のclassNameが上書きされます
私は持っています成分。 Selectの選択された値を表示するdivにclassNameを指定する場合、すべてのマテリアルUIコンポーネントのように他のコンポーネントにclassNameを追加するのではなく、それらをオーバーライドします。
<Select />
コンポーネントがあり、 SelectDisplayProps
にclassName
を追加すると、選択した値を表示するコンポーネントの既存のclassNameが上書きされます。 。
既存のclassNameをオーバーライドするのではなく、それらに追加する必要があります。
ここでバグを確認するためのサンドボックスを見つけることができます: https :
手順:
SelectDisplayProps
オブジェクトがあります:SelectDisplayProps={{
className: classes.selectDisplay
}}
SelectDisplayProps
が未定義に変更されます。SelectDisplayProps
がない場合、マテリアルUIのデフォルトクラスがあることがわかります。 ただし、 SelectDisplayProps
を指定すると、classNameが消えます。選択値を表示する要素のスタイルを上書きしたい。 与えようとしているスタイルを完全に変えても問題はあるので、関係ないと思います。
| 技術| バージョン|
| ----------- | ------- |
| 素材-UI | v4.11.0 |
| React | 16.13.1 |
| ブラウザ| Chrome-バージョン86.0.4240.75(公式ビルド)(64ビット)|
| TypeScript | 3.9.5 |
@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に感謝します。