I'm developing a web app using React + Material UI. I would like to change the font size of the Select ponent. 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?

I'm developing a web app using React + Material UI. I would like to change the font size of the Select ponent. 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?

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Apr 23, 2022 at 11:52 José de FrançaJosé de França 16211 gold badge11 silver badge1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

This is how I did it

<Select fullWidth
        labelId="stateIdlabel"
        id="stateId"
        name="stateId" value={values.stateId}
        label="label"
        sx={{fontSize:'large'}}>
           <MenuItem sx={{fontSize:'large'}} value={1}>OK</MenuItem>
           <MenuItem sx={{fontSize:'large'}}  value={2}>NOT</MenuItem>
</Select>

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'