如何去除 Material UI 的 DatePicker 的边框？

Posted 2023-05-07

【中文标题】如何去除 Material UI 的 DatePicker 的边框？

【英文标题】：How to remove border of Material UI's DatePicker?

【发布时间】：2021-06-08 07:37:30

【问题描述】：

这里是日期选择器组件

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 中的位置。

【问题讨论】：

material-ui-pickers.dev/demo/datepicker#customization

【参考方案1】：

您只需要编辑一点KeyboardDatePicker 元素：

删除inputVariant="outlined"

添加

InputProps=
  disableUnderline: true

CodeSandbox

【讨论】：

这提高了我的用户界面质量，我得到了我想要的答案。

@AnkitaRay 酷！你能把答案标记为接受吗？ ***.com/help/someone-answers 谢谢 :)

【参考方案2】：

const useStyles = makeStyles(
  root: 
    "& .MuiInputBase-root": 
      padding: 0,
      "& .MuiButtonBase-root": 
        padding: 0,
        paddingLeft: 10,
      ,
      "& .MuiInputBase-input": 
        padding: 15,
        paddingLeft: 0
      ,
      "& .MuiOutlinedInput-notchedOutline": 
        border: 'none'
      
    
  
);

【参考方案3】：

只需删除 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)
  />

Here您的代码已修改。

【讨论】：

感谢您的回答，但我什至不想要那个底部边框。

【参考方案4】：

在 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 />
            />