嘿，我懂你现在的困扰——想用Antd的DatePicker只展示日历主体部分，把输入框和页脚藏起来，但用styled-components写的样式就是不生效对吧？这其实是Antd组件的一个小特性导致的，我来给你拆解下原因，再提供几个可行的解决方案：

为啥原来的代码没效果？ #

核心问题在于：Antd的DatePicker弹出的日历面板（包括页脚）是单独挂载到document.body上的，不是作为StyledDatePicker组件的子DOM存在的。而styled-components的样式是有隔离性的，你的选择器根本碰不到这个脱离了组件层级的面板元素。至于输入框，可能是Antd自带的样式优先级比你写的更高，导致display: none没生效。

方案一：全局样式+自定义类名（最简单直接） #

我们给DatePicker加个自定义类，然后用全局样式来精准隐藏目标元素：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { DatePicker } 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>
    <DatePicker 
      className="only-calendar-picker"
      open 
      placeholder="Select Time" 
      onChange={onChange} 
      onOk={onOk} 
    />
  </div>,
  document.getElementById("container")
);

然后在你的index.css里添加这些全局样式：

/* 隐藏输入框 */
.only-calendar-picker .ant-calendar-input {
  display: none;
}

/* 隐藏日历面板的页脚，通过open状态类限定范围，避免影响其他DatePicker */
.ant-calendar-open .ant-calendar-footer {
  display: none;
}

方案二：用panelRender自定义面板（更优雅的组件化方式） #

Antd的DatePicker提供了panelRender属性，允许我们完全自定义日历面板的内容，这样就能直接把页脚去掉，同时用styled-components隐藏输入框：

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;
  }
`;

// 自定义面板，只保留日历头部和主体，去掉页脚
const CustomCalendarPanel = ({ children, ...restProps }) => {
  // 把面板的子元素拆分成头部、主体、页脚，只保留前两个
  const [calendarHeader, calendarBody] = React.Children.toArray(children);
  return (
    <div {...restProps}>
      {calendarHeader}
      {calendarBody}
    </div>
  );
};

ReactDOM.render(
  <div>
    <StyledDatePicker 
      open 
      placeholder="Select Time" 
      onChange={onChange} 
      onOk={onOk}
      panelRender={(originalPanel) => <CustomCalendarPanel>{originalPanel}</CustomCalendarPanel>}
    />
  </div>,
  document.getElementById("container")
);

方案三：用styled-components的全局样式注入（如果你坚持用styled-components写全局样式） #

可以用styled-components的createGlobalStyle来注入全局样式，同时用容器类来限定范围，避免影响其他组件：

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

// 创建全局样式组件
const CalendarGlobalStyles = createGlobalStyle`
  .calendar-container .ant-calendar-input {
    display: none;
  }
  .calendar-container .ant-calendar-open .ant-calendar-footer {
    display: none;
  }
`;

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

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

// 包裹DatePicker的容器
const CalendarContainer = styled.div`
  /* 这里可以加其他容器样式 */
`;

ReactDOM.render(
  <div>
    <CalendarGlobalStyles />
    <CalendarContainer className="calendar-container">
      <DatePicker 
        open 
        placeholder="Select Time" 
        onChange={onChange} 
        onOk={onOk} 
      />
    </CalendarContainer>
  </div>,
  document.getElementById("container")
);

这几个方案里，我个人推荐方案二，因为它更符合React组件化的思想，不会引入全局样式的污染问题。如果只是快速实现，方案一最省事~

内容的提问来源于stack exchange，提问作者Josh