[英]MUI Select Component Padding (ReactJS)
I have a Material UI Select
component and am trying to reduce the padding within the element.我有一个 Material UI Select
组件,我正在尝试减少元素内的填充。 The padding appears to be a property of one of the subclasses .MuiOutlinedInput-input
.填充似乎是子类之一的属性.MuiOutlinedInput-input
。 However, I haven't been able to change the padding despite setting it to zero using the standard sx
approach.但是,尽管使用标准sx
方法将填充设置为零,但我无法更改填充。
Edit : I was able to find a working solution, see my post in the solutions thread.编辑:我能够找到一个可行的解决方案,请参阅我在解决方案线程中的帖子。
Here is the base code for the component:这是组件的基本代码:
import { Select, MenuItem } from '@material-ui/core';
<Select
id="time-period-select"
value={timeline}
onChange={handleTimelineChange}
variant="outlined"
>
<MenuItem value={10}>All Time</MenuItem>
<MenuItem value={20}>This Year</MenuItem>
<MenuItem value={30}>This Month</MenuItem>
<MenuItem value={40}>This Week</MenuItem>
<MenuItem value={50}>Today</MenuItem>
</Select>
Here is my attempt to remove the padding (I have tried several variations of this):这是我尝试删除填充的尝试(我尝试了几种变体):
<Select
...
sx={p: 0, '& .MuiOutlinedInput-input': {p: 0}}
>
Any help would be greatly appreciated.任何帮助将不胜感激。 Thanks!谢谢!
Side Note : I would like to further customize the component (ex. changing the background color) which doesn't seem to work either, so if you have a general approach for customizing the Select
component that would be great:)旁注:我想进一步自定义似乎也不起作用的组件(例如更改背景颜色),因此,如果您有自定义Select
组件的通用方法,那就太好了:)
After tinkering around some more and looking at MUI Treasury , I was able to arrive at a solution.在进行了更多修改并查看了MUI Treasury之后,我找到了一个解决方案。 The following is the correct approach:以下是正确的做法:
const useStyles = makeStyles(() => ({
select: {
background: '#F5F6F9',
paddingLeft: 24,
paddingTop: 14,
paddingBottom: 15,
...
},
}));
...
const classes = useStyles();
<Select
...
disableUnderline
classes={{ root: classes.select }}
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.