Попытка скрыть выбранные элементы ввода и нижнего колонтитула календаря в React

Question

Я работаю с элементом DatePicker в Antd и пытаюсь показать только тело календаря.

Я пытался использовать стилизованные компоненты для непосредственного нацеливания на верхний и нижний колонтитулы календаря и устанавливать свойства display: none; для обоих, но пока без кубиков.

Библиотека Antd

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