Задать интерфейс материала Выберите ширину? - PullRequest
Новая
       7

Задать интерфейс материала Выберите ширину?

0 голосов
/ 14 мая 2019

Я пытаюсь установить ширину компонента Выбор материала.Для этого я должен предоставить класс для компонента FormControl, например mw-120, который ссылается на класс CSS, определяющий min-width из 120px.

Material UI Выберите компонент: 

<FormControl className='mw-120'>
    <InputLabel htmlFor='selected-language'>Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

Класс CSS: 

.mw-120 {
    min-width: 120px;
}

Хотя я ожидаю, что размер компонента Select теперь будет иметь ширину минимум 120 пикселей, этот компонент останется точно таким же после рендеринга, как показано на следующем рисунке.Другими словами, это сужать.Ширина недостаточно велика.Ширина должна быть больше, чем метка Language.

width of Select component too small

Анализ элементов в Инструментах разработчика Chrome показал, что основной элемент DIV этогоКомпонент имеет класс .MuiFormControl-root-234, который содержит min-width: 0;, и он находится / оценивается выше, чем мой .mw-120 класс.Я думаю, это отменяет мой .mw-120 класс, верно?Есть ли другой способ повлиять на ширину компонента Material UI Select?На странице Material UI Select component page .

нет полезных примеров влияния на ширину этого компонента.

1 Ответ

2 голосов
/ 14 мая 2019

Если вы делаете что-то одноразовое оформление, вы можете использовать встроенный стиль , у меня это сработало. 

<FormControl style={{minWidth: 120}}> // this line
    <InputLabel htmlFor='selected-language'>Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

enter image description here

Если вы хотите повторно использовать его в большем количестве кода и хотите избежать дублирования кода, вы, вероятно, захотите работать с Темами

...