javascript - 尝试在 React 中隐藏日历的选择输入和页脚元素

Question

我正在 Antd 中使用 DatePicker 元素，并且我尝试仅显示日历正文。

我尝试使用样式化组件直接定位日历的页眉和页脚，并在两者上设置 display: none; 属性，但到目前为止还没有成功。

Antd Library

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker } from "antd";
import styled from "styled-components";

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}

const StyledDatePicker = styled(DatePicker)`
  &&& {
    .ant-calendar-input {
      display: none;
    }

    .ant-calendar-footer {
      display: none;
    }
  }
`;

ReactDOM.render(
  <div>
    <StyledDatePicker
      open
      placeholder="Select Time"
      onChange={onChange}
      onOk={onOk}
    />
  </div>,
  document.getElementById("container")
);

Answer 1

纯 CSS 就足够了；无需创建新样式的组件:

https://codesandbox.io/s/vibrant-framework-89gwd

CSS

.my-class,
.ant-calendar-input-wrap,
.ant-calendar-footer {
  display: none;
}

组件

<DatePicker
  open
  className="my-class"
  placeholder="Select Time"
  onChange={onChange}
  onOk={onOk}
/>