Необходимо переопределить Antd Styling с помощью Styled Component

Question

Я пытаюсь изменить стиль AntD DatePicker с помощью Styled Components. Это похоже на предыдущий вопрос, который я задал , но это не совсем решило мою проблему.

Я могу добиться того, что мне нужно, с помощью CSS, но мне нужно сделать это с помощью Styled Components, так какDatePicker / Calendar является частью более крупного приложения, которое не использует CSS-файлы для стилизации.

Component

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

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

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

ReactDOM.render(
  <div>
    <Row>
      <Col span={8}>
        <DatePicker open className="my-class" onChange={onChange} onOk={onOk} />
      </Col>
      <Col span={8} />
    </Row>
  </div>,
  document.getElementById("container")
);

Component CSS

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

.ant-calendar-header .ant-calendar-next-year-btn {
  display: none;
}

.ant-calendar-header .ant-calendar-prev-year-btn {
  display: none;
}