Как изменить стиль выпадающего элемента выбора материала-пользовательского интерфейса

Question

Я пытаюсь настроить дизайн (границы, радиус границы) раскрывающегося элемента выбора материала-пользовательского интерфейса. В документации пользовательского интерфейса для материалов упоминаются различные свойства для переопределения и стилизации различных подкомпонентов, но не для самого раскрывающегося списка. Причиной этого может быть то, что раскрывающийся список отображается вне корневого компонента с абсолютным положением относительно страницы.

Есть идеи, как мне оформить выпадающий список? Вот скриншот текущего состояния компонента:

Мне удалось настроить дизайн элемента ввода компонента выбора материала и пользовательского интерфейса

Answer 1

Для материала-версии 0

Применить стили к dropdownMenuprops, как указано здесь Выбрать свойства

const dropdownMenuProps={
  menuStyle:{
    border: "1px solid black",
    borderRadius: "5%",
    backgroundColor: 'lightgrey',
  },
}

Примените стиль для выбора с помощью выпадающего меню

<SelectField
        multiple={true}
        hintText="Overriden"
        value={values}
        onChange={this.handleChange}
        dropDownMenuProps={dropdownMenuProps}
      >
      

SandBox Demo с использованием версии 0.18

Для Material-ui Версия 1

Раскрывающиеся стили или стили меню переопределяются с помощью свойства MenuProps.

Select-API

Попробуйте это

const styles = theme => ({
    dropdownStyle: 
    {
      border: "1px solid black",
      borderRadius: "5%",
      backgroundColor:'lightgrey',
    },
});

Применение стиля к MenuProps

 <Select
            value={this.state.age}
            onChange={this.handleChange}
            inputProps={{
              name: "age",
              id: "age-simple"
            }}
            MenuProps={{ classes: { paper: classes.dropdownStyle } }}
          >

Я попробовал это в codesandbox, и у меня это работает

Код Песочница Демо

Прочитайте API Меню и Выберите для получения более подробной информации.