React Material UI - 使用 withStyles 覆盖

Question

我正在开发一个项目并利用 React Material UI，并且需要在焦点状态下覆盖 Select 组件的边框底部颜色。这是我现在正在使用的

import { Select as MuiSelect, withStyles } from '@material-ui/core';
import { BRAND_COLORS } from '../../constants/colors';

const FONT_SIZE = 20;

const Select = withStyles({
  root: {
    fontSize: FONT_SIZE,
    '&:focus': {
      backgroundColor: 'transparent',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: BRAND_COLORS.blue,
    },
  },
})(MuiSelect);

export default Select;

<Select
  native
  startAdornment={<InputAdornment position="start"><FilterListIcon /></InputAdornment>}
  value={service.regionalFocus}
  onChange={(event) => this.props.changeSelectedRegionalFocus({
      providerId, serviceId: service.service_id, regionalFocus: 
event.target.value})
      }
    >
      {regionalFocus.map((region, index) => service.service_regions[region.value].length ? (
        <option key={index} value={region.value}>
          {region.label}
        </option>
      ) : null)}
    </Select>

我可以覆盖字体大小，但是，borderBottomColor 没有注册。有什么想法吗？

Answer 1

您似乎正在尝试设置Input 的样式，它是Select 的子代。要覆盖 Input 道具，包括样式，您需要在 Select 上的 inputProps 道具中将它们作为覆盖传递。

类似：

const MySelect = (props) => {
  return (
    <Select {...props} inputProps={{ classes: { underline: props.classes.inputOverride } }}
  );
};

export default withStyles({
  root: {
    fontSize: FONT_SIZE,
    '&:focus': {
      backgroundColor: 'transparent',
    }
  },
  inputOverride: {
    '&:after': {
      borderBottomColor: BRAND_COLORS.blue,
    }
  }
})(MySelect);

Select 和 Input 的文档将在这里为您提供帮助： https://material-ui.com/api/select/ https://material-ui.com/api/input/

以及真正了解其工作原理的源代码： https://github.com/mui-org/material-ui/blob/d956b40539d7b724ca6026aeae96e1f42dd22331/packages/material-ui/src/Select/Select.js#L230