Пользовательский интерфейс материала - невозможно установить высоту всплывающего меню, открытого из Select Validator - PullRequest
Новая
       15

Пользовательский интерфейс материала - невозможно установить высоту всплывающего меню, открытого из Select Validator

0 голосов
/ 30 марта 2020

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

'& .MuiPopover-paper': {
  height: '330px',
},

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

Это код JS / JSX: 

<SelectValidator
    id="color" 
    inputRef={this.formRefs.color}
    value={color}
    onChange={handleChangeByEvent}
    variant="outlined"
    name='color'
    className={classes.boder}
    validators={['required']}
    errorMessages={["Please select your vehicle's color"]}
>
        <MenuItem value="" className={classes.option}>
            <em>None</em>
        </MenuItem>
        {
            vehicleColors.map(color => {
                return <MenuItem key={color.id} value={color} className={classes.option}>       
                {color.name}</MenuItem>
            })
         }
</SelectValidator>

Вот соответствующий CSS: 

border: {
    width: '100%',
    margin: '7px 0',
    borderRadius: '1px',
    color: '#333',
    fontSize: '14px',
    '& .MuiSelect-iconOutlined': {
        top: 'auto',
        fontSize: '24px',
        color: '#fff',
        marginRight: '10px',
        backgroundImage: `url(${downImg})`,
    },
    '& .MuiSelect-select': {
        height: '48px',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        border: 'solid 1px #6e6e6e',
        padding: '0 14px',
        backgroundColor: '#ffffff',
        fontFamily: 'FordAntenna-Regular',
        color: '#333',
        fontSize: '14px',
        borderRadius: '3px',
    },
},

1 Ответ

1 голос
/ 07 апреля 2020

Понял это после некоторой переделки. Поповер не является дочерним элементом элемента root или дочерних элементов root. Он создается и отображается при доступе к всплывающему окну во время выполнения с использованием встроенных классов Material-ui.

Следовательно, настройки для встроенных классов должны быть переопределены.

Это можно сделать, создав файл styleOverrides. css с кодом ниже (должен быть. css, добавив этот код в ваши стили. js не будет работать). Затем импортируйте. css в компонент, где создается поповер, который вы хотите изменить. 

.MuiMenu-paper.MuiPopover-paper {
    max-height: 300px //or whatever attribute you want to alter
}
...