css - 如何更改 Material UI 的日期选择器的填充?
问题描述
这是codeandbox链接
function InlineDatePickerDemo(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<Fragment>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
style={{ padding: "20px" }}
autoOk
variant="inline"
inputVariant="outlined"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
</MuiPickersUtilsProvider>
</Fragment>
);
}
我想减少日期选择器框内的间隙,但提供自定义样式并没有影响。
我很想知道为什么样式不起作用以及解决此类问题的方法是什么。
解决方案
您所做的是为父组件设置样式。为了改变选取器内部组件之间的间距,您需要覆盖子组件中的以下类:
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
}
}
}
});
const classes = useStyles();
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
className={classes.root}
{...}
/>
</MuiPickersUtilsProvider>
);
现场演示
推荐阅读
- python - python selenium chrome登录脚本按钮不可点击
- openpyxl - 使用 xlrd 将 xls 转换为 xlsx
- json - 将复杂对象转换为 Json || 序列化对象
- git - 从推送到 gerrit 的更改中删除“相关更改”
- excel - 等到 selenium excel vba 中出现特定值
- reactjs - 可触摸的不透明标题 React Native
- wordpress - 在单一 WooCommerce 产品中的“尺寸”图表旁边显示链接
- sql-server - SQL Server 没有正确命名
- sql-server - 升级 2008->2016 后 Oracle 上的 SQL Server 链接服务器性能
- json - 如何在颤动中将下一页数据解析为相同的listview.builder