reactjs 如何删除物料界面的日期选择器边框？

k2fxgqgv 于 2023-03-12 发布在 React

关注(0)|答案(5)|浏览(153)

下面是日期选择器组件

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 style类负责边框宽度，但不知道将该类放在makeStyles中的何处。

reactjs

来源：https://stackoverflow.com/questions/66563420/how-to-remove-border-of-material-uis-datepicker

5条答案

按热度按时间

bn31dyow1#

您只需要稍微编辑一下KeyboardDatePicker元素：
1.删除inputVariant="outlined"
1.加

InputProps={{
  disableUnderline: true
}}

CodeSandbox

赞(0）回复(0）举报 2023-03-12

wvt8vs2t2#

在MUI中，您可以将variant=“standard”添加到文本字段中：

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

赞(0）回复(0）举报 2023-03-12

ygya80vv3#

只需要移除inputVariant="outlined" props，那么代码就变成了：

<KeyboardDatePicker
    className={classes.root}
    autoOk
    variant="inline"
    label="With keyboard"
    format="MM/dd/yyyy"
    value={selectedDate}
    InputAdornmentProps={{ position: "start" }}
    onChange={(date) => handleDateChange(date)}
  />

Here您的代码修改。

赞(0）回复(0）举报 2023-03-12

imzjd6km4#

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

赞(0）回复(0）举报 2023-03-12

efzxgjgh5#

对于MUI Datepicker版本6及以上，我们需要使用slotProps。添加以下示例代码：

<DatePicker
    label="Date of Birth"
    value={account.dob}
    onChange={inputsHandler}
    sx={{ width: "100%" }}
    slotProps={{ textField: { variant: 'standard', } }}  {/** set variant here */}
/>

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 如何删除物料界面的日期选择器边框？

5条答案

相关问题

热门标签

最新问答