ReactJS:材料UIオートコンプリートドロップダウンのスタイルをカスタマイズする方法

3755 ワード
テキストリンク
このポストでは、どのように材料のUIドロップダウンの背景を変更することができますを説明します.しかし、この方法では、同様にドロップダウンのための他のCSSを追加することができます.
材料UIのAutocompleteコンポーネントはpropという名前のPaperComponentを持っています.dropdownの背景を変更できます.propの支柱にPaperの部品を渡し、PaperComponent支柱を使ってbackgroundにyellowに設定します.
私のリストは現在、内部でレンダリングされ、ドロップダウンの色はstyleです
      <Autocomplete
        id="combo-box-demo"
        options={mitarbeiter}
        onChange={() => {}}
        getOptionLabel={(option) => option.title}
        fullWidth
        PaperComponent={({ children }) => (
          <Paper style={{ background: "yellow" }}>{children}</Paper>
        )}
        style={{ width: 350 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Mitarbeiter"
            variant="outlined"
            style={{ backgroundColor: "pink !important" }}
          />
        )}
        required
      />
私は、オプションのリストがそこに提出されることを確認するために、内部でyellowを通過しています.
Codesandbox https://codesandbox.io/s/wizardly-frost-9cj0v?file=/src/App.jsのワーキングサンプルです
あなたが{children}構成要素のスタイル支柱に加えることができるさらなるstylesをセットする必要があるならば.
[プログラマー]コードテスト練習-51
[標準アルゴリズム]1541号:失われたかっこ