[英]React+Material UI: How to change the font size of the Select component?
I'm developing a web app using React
+ Material UI
.我正在使用
React
+ Material UI
开发一个 web 应用程序。 I would like to change the font size of the Select
component.我想更改
Select
组件的字体大小。 I'm having to use the MenuProps
property, as the code snippet that follows.我不得不使用
MenuProps
属性,如下面的代码片段所示。 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?有人可以帮我吗?
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>
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'
另外,如果你想在 class 级别应用它:
'&.MuiSelect-select'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.