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

问题

I'm working with a DatePicker element in Antd and I'm trying to only show the calendar body.

I've tried using styled components to directly target the header and footer of the calendar and set display: none; properties on both, but so far no dice.

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")
);

回答1:

Pure CSS will suffice for this; no need to create a new styled component:

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

CSS

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

Component

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

来源：https://stackoverflow.com/questions/56954833/trying-to-hide-the-select-input-and-footer-elements-of-calendar-in-react