材料 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 文档中了解所有这些字符串，或在浏览器开发人员工具中检查主题。