嘿，这个问题我之前在项目里也踩过坑，咱们来一步步拆解清楚！

核心原因：CSS 优先级与样式加载顺序 #

你以为 styled-components 的样式优先级更高？其实这里的问题出在CSS 选择器权重相同的情况下，加载顺序靠后的样式会覆盖靠前的。

• Antd 的 .ant-card 是类选择器，你通过 styled-components 生成的 .hBLsXc 也是类选择器，两者权重完全一致。
• 如果 Antd 的全局样式（比如 antd/dist/antd.css）是在你的组件样式之后注入到页面的，那它的 padding: 0px 就会覆盖你定义的 padding: 2px。

至于你担心的 className 转发问题？从你给出的最终 class 属性 "ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered" 来看，Antd 的 Card 组件已经成功把自定义 className 转发了，你的样式类确实加到了元素上，所以这不是问题所在~

解决方案 #

1. 提高自定义样式的选择器权重（最推荐） #

通过组合选择器，让你的自定义样式权重超过 Antd 的样式。比如在 styled-components 里嵌套 .ant-card：

import { Card } from 'antd';
export const UsageCard = styled(Card)`
  &.ant-card {
    box-shadow: 1px 1px;
    padding: 2px;
  }
`

这样生成的选择器是 .hBLsXc.ant-card，权重是两个类选择器之和，比单个 .ant-card 高，就能稳稳覆盖 Antd 的样式了。

2. 调整样式加载顺序 #

确保你的 styled-components 样式在 Antd 全局样式之后加载。比如在项目入口文件（如 index.js）里，把 Antd 的样式 import 放在最前面，你的组件 import 放在后面：

// index.js
import 'antd/dist/antd.css'; // 先加载 Antd 全局样式
import App from './App'; // 再加载你的组件（包含 styled-components 样式）

不过这种方法受项目构建工具的影响较大，不如第一种方法可靠。

3. 临时应急：使用 !important（不推荐） #

如果赶时间可以临时用，但不建议长期使用——它会破坏 CSS 的优先级规则，后续维护容易出问题：

export const UsageCard = styled(Card)`
  box-shadow: 1px 1px;
  padding: 2px !important;
`

总结 #

本质是 CSS 优先级的基础问题，和 className 转发无关。只要让你的自定义样式选择器权重更高，或者确保它在 Antd 样式之后加载，就能解决覆盖问题啦！

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