这是日期选择器组件
import React, { Fragment, useState } from "react";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import makeStyles from "@material-ui/styles/makeStyles";
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
}
}
}
});
function InlineDatePickerDemo(props) {
const [selectedDate, handleDateChange] = useState(new Date());
const classes = useStyles();
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
className={classes.root}
autoOk
variant="inline"
inputVariant="outlined"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
</MuiPickersUtilsProvider>
);
}
export default InlineDatePickerDemo;
来自 codeSandbox Link谁能告诉如何从四面八方删除边界?虽然我设法知道 .MuiInput-underline:before 样式类负责边框宽度,但不知道该类在 makeStyles 中的位置。
最佳答案
您只需要稍微编辑一下 KeyboardDatePicker
元素:
inputVariant="outlined"
InputProps={{
disableUnderline: true
}}
CodeSandbox
关于javascript - 如何去除 Material UI 的 DatePicker 的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66563420/