试图在 React 中隐藏日历的 select 输入和页脚元素

Question

我在 Antd 中使用 DatePicker 元素，我试图只显示日历主体。

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

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

试图在 React 中隐藏日历的 select 输入和页脚元素

Trying to hide the select input and footer elements of Calendar in React

javascript

reactjs

styled-components

antd