React+Material UI: How to change the font size of the Select component?

Question

I'm developing a web app using React + Material UI. I would like to change the font size of the Select component. I'm having to use the MenuProps property, as the code snippet that follows. However, it's not working.

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>
    );
}

Can somebody help me?

Answer 1

You can just add the font size prop directly to the Input:

           <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>

Answer 2

Here is a solution:

                <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>

Also, if you want to apply it on the class level: '& .MuiSelect-select'