如何将react-select样式修改为Material UI标准TextField无外框样式

直接通过react-select内置的styles属性覆盖默认样式即可，无需额外引入其他依赖。

1. 定义自定义样式配置 #

const muiStyleSelect = {
  // 控制条主样式，对齐MUI无外框TextField
  control: (baseStyle) => ({
    ...baseStyle,
    border: 'none', // 移除默认边框
    boxShadow: 'none', // 移除默认聚焦阴影
    minHeight: '56px', // 匹配MUI标准TextField高度
    padding: '0 14px',
    borderRadius: '4px 4px 0 0', // 仅保留顶部圆角，对齐MUI无外框样式
    backgroundColor: 'rgba(0, 0, 0, 0.06)', // 匹配MUI Filled类型TextField默认背景
    '&:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.09)', // 匹配MUI hover状态背景色
    }
  }),
  // 移除控制条内部选中值和下拉箭头的分隔线
  indicatorSeparator: (baseStyle) => ({
    ...baseStyle,
    display: 'none'
  }),
  // 下拉菜单样式对齐MUI弹窗规范
  menu: (baseStyle) => ({
    ...baseStyle,
    marginTop: 0,
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)'
  }),
  // 下拉选项样式对齐MUI
  option: (baseStyle, { isFocused, isSelected }) => ({
    ...baseStyle,
    backgroundColor: isSelected ? 'rgba(25, 118, 210, 0.08)' : isFocused ? 'rgba(0, 0, 0, 0.04)' : 'transparent',
    '&:active': {
      backgroundColor: 'rgba(0, 0, 0, 0.08)'
    }
  })
}

2. 组件中使用 #

将上述样式配置传入react-select的styles属性即可：

import Select from 'react-select';

const options = [
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' },
];

export default function CustomSelect() {
  return (
    <Select
      options={options}
      styles={muiStyleSelect}
      placeholder="请选择内容"
      className="react-select-root"
    />
  )
}

3. 可选：添加MUI风格聚焦下划线 #

如果需要实现MUI TextField聚焦时的底部下划线动效，添加以下CSS即可：

.react-select-root {
  position: relative;
}
.react-select-root::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #1976d2;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}
.react-select-root:focus-within::after {
  transform: scaleX(1);
}

如果需要适配深色主题，只需要将对应颜色替换为MUI深色主题的对应色值即可。

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