React Material UI - переопределение с использованием withStyles

Question

Я работаю над проектом и использую пользовательский интерфейс React Material, и мне нужно переопределить нижний цвет границы компонента «Выбор» в сфокусированном состоянии. Вот что я сейчас использую

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 реквизиты, включая стили, вам нужно будет передать их как переопределение в inputProps реквизит Select.

Что-то вроде:

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