需要使用样式化组件覆盖Antd样式

Question

我正在尝试使用样式化组件来更改Antd DatePicker的样式。 This is similar to a previous question I asked，但并不能完全解决我的问题。

我可以使用CSS来实现所需的功能，但是我需要使用样式化组件来实现，因为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;
}