javascript React+材料UI：如何更改选择组件的字体大小？

oalqel3c 于 2023-02-15 发布在 Java

关注(0)|答案(3)|浏览(119)

我正在使用React + Material UI开发一个Web应用程序。我想更改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>
    );
}

有人能帮帮我吗？

JavaScript

来源：https://stackoverflow.com/questions/71979367/reactmaterial-ui-how-to-change-the-font-size-of-the-select-component

3条答案

按热度按时间

iezvtpos1#

您可以直接将字体大小属性添加到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>

赞(0）回复(0）举报 2023-02-15

hi3rlvi22#

下面是一个解决方案：

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

赞(0）回复(0）举报 2023-02-15

yyhrrdl83#

我就是这么做的

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

赞(0）回复(0）举报 2023-02-15

我来回答

javascript React+材料UI：如何更改选择组件的字体大小？

3条答案

相关问题

热门标签

最新问答