material-ui-next beta33：如何让AppBar中的Select组件使用secondary主题色？

嘿，我来帮你搞定这个问题！在Material-UI Next Beta33版本里，AppBar已经用上了主题的secondary颜色，但嵌套的Select组件还默认沿用primary，这是因为Select的默认样式并没有自动继承父组件的颜色配置。下面给你几个靠谱的解决方法，按需选择：

方法1：全局主题覆盖（所有Select生效） #

如果你希望项目里所有的Select组件都统一用secondary颜色，可以直接在自定义主题里覆盖MuiSelect的样式：

import { createMuiTheme, MuiThemeProvider } from 'material-ui/styles';

// 创建自定义主题
const theme = createMuiTheme({
  overrides: {
    MuiSelect: {
      // 设置Select文本颜色为secondary
      root: {
        color: theme.palette.secondary.main,
        // 聚焦时移除默认背景，避免和AppBar底色冲突
        '&:focus': {
          backgroundColor: 'transparent',
        },
      },
      // 下拉图标也同步改成secondary颜色
      icon: {
        color: theme.palette.secondary.main,
      },
    },
  },
});

// 把AppBar包裹在主题提供者中
<MuiThemeProvider theme={theme}>
  <AppBar color="secondary">
    <Toolbar>
      <Select value={yourValue} onChange={yourChangeHandler}>
        {/* 你的选项列表 */}
      </Select>
    </Toolbar>
  </AppBar>
</MuiThemeProvider>

方法2：给单个Select定制样式（仅目标组件生效） #

如果只想让这个特定的Select用secondary颜色，推荐用withStyles高阶组件封装一个自定义Select：

import { withStyles } from 'material-ui/styles';
import Select from 'material-ui/Select';

// 定制Select的样式
const StyledSecondarySelect = withStyles((theme) => ({
  root: {
    color: theme.palette.secondary.main,
  },
  icon: {
    color: theme.palette.secondary.main,
  },
}))(Select);

// 在AppBar中使用这个定制后的Select
<AppBar color="secondary">
  <Toolbar>
    <StyledSecondarySelect value={yourValue} onChange={yourChangeHandler}>
      {/* 你的选项列表 */}
    </StyledSecondarySelect>
  </Toolbar>
</AppBar>

方法3：内联样式（快速测试用） #

如果只是临时测试效果，也可以直接用内联样式快速修改，不过这种方式不够灵活，不推荐在正式项目中大量使用：

// 记得先通过withTheme高阶组件或useTheme hook获取theme对象
<AppBar color="secondary">
  <Toolbar>
    <Select
      value={yourValue}
      onChange={yourChangeHandler}
      style={{ color: theme.palette.secondary.main }}
      // 手动修改下拉图标的颜色
      IconComponent={<ArrowDropDownIcon style={{ color: theme.palette.secondary.main }} />}
    >
      {/* 你的选项列表 */}
    </Select>
  </Toolbar>
</AppBar>

小提示 #

Beta33版本的Material-UI API和正式版有一些差异，比如Select的图标组件需要单独指定样式，默认不会自动继承文本颜色。另外，设置Select的&:focus样式是为了避免聚焦时出现和AppBar背景冲突的底色，提升视觉一致性。

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