Material UI Select组件箭头左移及输入框蓝色设置问题求助

1. 将箭头图标移至左侧 #

通过覆盖MuiSelect-icon的定位样式，把默认在右侧的箭头移到左侧，同时给输入框左侧留出空间避免文字被图标遮挡：

<Select
  sx={{
    '& .MuiSelect-icon': {
      right: 'unset', // 取消默认右侧定位
      left: 8, // 设置图标左侧位置
    },
    paddingLeft: 4, // 给图标预留空间，防止文字被遮挡
  }}
  // 其他属性
>

2. 设置输入框为蓝色 #

需要覆盖输入框在不同状态（默认、hover、聚焦）下的边框、文字及标签颜色：

<Select
  sx={{
    // 默认状态下的边框颜色
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: '#2196f3',
    },
    // 鼠标hover时的边框颜色
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: '#1976d2',
    },
    // 组件聚焦时的边框颜色
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: '#2196f3',
    },
    // 输入文字的颜色
    '& .MuiInputBase-input': {
      color: '#2196f3',
    },
    // 聚焦时标签的颜色
    '& .MuiInputLabel-root.Mui-focused': {
      color: '#2196f3',
    },
  }}
  // 其他属性
>

完整示例代码 #

import React from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';

export default function App() {
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <FormControl sx={{ m: 1, minWidth: 120 }}>
      <InputLabel id="demo-simple-select-label">Age</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        label="Age"
        onChange={handleChange}
        sx={{
          // 箭头左移样式
          '& .MuiSelect-icon': {
            right: 'unset',
            left: 8,
          },
          paddingLeft: 4,
          // 输入框蓝色样式
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '#2196f3',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: '#1976d2',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#2196f3',
          },
          '& .MuiInputBase-input': {
            color: '#2196f3',
          },
          '& .MuiInputLabel-root.Mui-focused': {
            color: '#2196f3',
          },
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
  );
}

内容的提问来源于stack exchange，提问作者abab