这是日期选择器组件
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 中的哪里。
对于 MUI Datepicker 版本 6 及更高版本,我们需要使用
slotProps
。添加下面的示例代码:
<DatePicker
label="Date of Birth"
value={account.dob}
onChange={inputsHandler}
sx={{ width: "100%" }}
slotProps={{ textField: { variant: 'standard', } }} {/** set variant here */}
/>
您只需要稍微编辑一下
KeyboardDatePicker
元素即可:
删除
inputVariant="outlined"
添加
InputProps={{
disableUnderline: true
}}
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10,
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
},
"& .MuiOutlinedInput-notchedOutline": {
border: 'none'
}
}
}
});
在 MUI 中,您可以将variant=“standard”添加到 TextField :
renderInput={(params) => <TextField variant="standard" {...params} />}
完全:
<DesktopDatePicker
inputFormat="MM/dd/yyyy"
className="mt-0 w-100"
required={required}
margin="normal"
id="date-picker-dialog"
label={label}
format="dd/MM/yyyy"
value={value}
onChange={handleDateChange}
renderInput={(params) => <TextField variant="standard" {...params} />}
/>
只需移除
inputVariant="outlined"
道具即可。所以你的代码变成:
<KeyboardDatePicker
className={classes.root}
autoOk
variant="inline"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
这里您的代码已修改。
在 CSS 中试试这个。将下面的代码添加到你的 CSS 中,它对我来说确实有用。谢谢
.MuiOutlinedInput-notchedOutline {
border: none ! important ;
}