Пользовательский интерфейс React+Material: как изменить размер шрифта компонента Select?

Я разрабатываю веб-приложение, используя React + Material UI. Я хотел бы изменить размер шрифта компонента Select. Мне нужно использовать свойство MenuProps в качестве следующего фрагмента кода. Однако это не работает.

const MenuProps = {
    PaperProps: {
        sx: {
            '& .MuiMenuItem-root': {
                fontSize: 10,
            },
        },
        style: {
            fontSize: 10,
        },
    },
};

const MultipleSelectTags = () => {
    const [tagFilter, setTagFilter] = useState([]);

    const handleChange = (event) => {
        const {
            target: { value },
        } = event;
        setTagFilter(
            typeof value === 'string' ? value.split(',') : value,
        );
    };

    return (
        <div>
            <FormControl sx={{ m: 1, width: 200 }} size="small">
                <InputLabel>Tag</InputLabel>
                <Select
                    multiple
                    value={tagFilter}
                    onChange={handleChange}
                    input={<OutlinedInput label="Tag" />}
                    renderValue={(selected) => selected.join(', ')}
                    MenuProps={MenuProps}
                >
                    {names.map((name) => (
                        <MenuItem key={name} value={name}>
                            <Checkbox checked={tagFilter.indexOf(name) > -1} />
                            <ListItemText primary={name} />
                        </MenuItem>
                    ))}
                </Select>
            </FormControl>
        </div>
    );
}

Кто-нибудь может мне помочь?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
29
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот решение:

                <Select
                    multiple
                    value={tagFilter}
                    onChange={handleChange}
                    input={<OutlinedInput label="Tag" />}
                    renderValue={(selected) => selected.join(', ')}
                    id="my-simple-select"
                    sx={{
                      '& #my-simple-select': {
                          fontSize: '2rem',
                       }
                     }}

                >
                    {names.map((name) => (
                        <MenuItem key={name} value={name}>
                            <Checkbox checked={tagFilter.indexOf(name) > -1} />
                            <ListItemText primary={name} />
                        </MenuItem>
                    ))}
                </Select>

Кроме того, если вы хотите применить его на уровне класса: '& .MuiSelect-select'

Ответ принят как подходящий

Вы можете просто добавить свойство размера шрифта непосредственно к вводу:

           <Select
                multiple
                value={tagFilter}
                onChange={handleChange}
                input={<OutlinedInput sx={{fontSize: '2rem'}} label="Tag" />}
                renderValue={(selected) => selected.join(', ')}
            >
                {names.map((name) => (
                    <MenuItem key={name} value={name}>
                        <Checkbox checked={tagFilter.indexOf(name) > -1} />
                        <ListItemText primary={name} />
                    </MenuItem>
                ))}
            </Select>

Другие вопросы по теме