如何修改Material Select组件的边框颜色？

方案1：Material UI 框架（React 场景） #

局部修改（推荐，不影响全局样式）

直接在 Select 组件上通过 sx 属性覆盖样式（v5 适用，v4 用 style 或 withStyles 写法逻辑一致）：

<Select
  variant="outlined"
  sx={{
    // 未选中普通状态边框
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: '#2196f3',
    },
    // hover 状态边框
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: '#1976d2',
    },
    // 聚焦/选中状态边框
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: '#0d47a1',
    }
  }}
  // 其余原有配置保持不变
>
  {/* 选项内容 */}
</Select>

全局CSS覆盖

如果需要全局所有Select生效，直接在全局样式文件中添加如下代码：

/* 普通状态 */
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #2196f3;
}
/* hover状态 */
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #1976d2;
}
/* 聚焦状态 */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0d47a1;
}

如果你用的是 filled 变体的Select，把修改目标类名替换为 .MuiFilledInput-underline:before（普通状态）、.MuiFilledInput-underline:hover:before（hover状态）、.MuiFilledInput-underline:after（聚焦状态）即可。

方案2：原生 Material Design Components（MDC） #

直接在CSS中覆盖默认样式：

/* 普通状态边框 */
.mdc-select .mdc-notched-outline__notch,
.mdc-select .mdc-notched-outline__leading,
.mdc-select .mdc-notched-outline__trailing {
  border-color: #2196f3;
}
/* 聚焦状态边框 */
.mdc-select.mdc-select--focused .mdc-notched-outline * {
  border-color: #0d47a1;
}

注意事项 #

如果样式不生效，说明默认样式优先级更高，可以通过两种方式解决：

• 给你的Select组件添加自定义类名，提高选择器优先级，比如添加类名 custom-blue-select 后，选择器写为 .custom-blue-select .MuiOutlinedInput-notchedOutline
• 临时测试可以加 !important 确认是优先级问题后，再调整选择器优先级避免滥用!important

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