材料 ui select 左側箭頭

Question

我是 Material UI 的新手，我想了解一些事情

我有一個簡單的 select 組件，我有兩個問題。

首先我想在左側而不是右側制作 select 的箭頭圖標其次我想將 select 的輸入着色為藍色但我只設法為下拉值着色

這是我試過的

任何幫助將不勝感激，謝謝

Answer 1

MUI 組件就像是由一些更小的部分組成的包。 您可以通過在sx道具中選擇他們的具體名稱來更改他們的 styles。
例如"&.MuiMenuItem-root"是菜單項， "&.MuiSvgIcon-root"是Select的小箭頭圖標。
順便說一句，要改變主要的東西，比如整個東西的顏色，你只需要把它放在sx中。 這將是你想要的東西：

<Select
  fullWidth
  IconComponent={ArrowDownwardIcon}
  value={selected}
  variant="outlined"
  onChange={selectionChangeHandler}
  sx={{
    backgroundColor: "red",
    "& .MuiSvgIcon-root": {
      right: "unset",
      left: "7px",
    },
  }}
>

您可以在MUI api 文檔中了解所有這些字符串，或在瀏覽器開發人員工具中檢查主題。