由第三方 (antd) 风格覆盖的风格化组件

Question

我有一个简单的 styled-components 正在应用于 antd 组件：

import { Card } from 'antd';

export const UsageCard = styled(Card)`

  box-shadow: 1px 1px;
  padding: 2px;
`

这会创建一个 div 和 class 属性，如下所示："ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered"

其中 .hBLsXc 是我的样式组件。不幸的是，我的 styled-componentn 中的 2px 填充被 ant-card (0px) 覆盖了。

知道为什么会这样吗？ styled-components 应该放在第一位，因为它是在第三方组件上实现的。这是我多次阅读的来自第三方组件的 className 转发的问题吗？无论如何，我真的不明白这是怎么回事。

感谢您的帮助！

Answer 1

className 必须放在Card Component 中，否则将不起作用。你应该检查 antd 看看他们是否这样做了。它必须看起来像这样：

const Card = ({ className }) => (
  <div className={className}>
    ...
  </div>
)

这是它的文档：

https://www.styled-components.com/docs/basics#styling-any-components

编辑：我检查了 antd，看起来你可以将 className 传递给它。 https://github.com/ant-design/ant-design/blob/master/components/card/index.tsx中有一段：

const classString = classNames(prefixCls, className, {
      [`${prefixCls}-loading`]: loading,
      [`${prefixCls}-bordered`]: bordered,
      [`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
      [`${prefixCls}-wider-padding`]: this.state.widerPadding,
      [`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
      [`${prefixCls}-contain-grid`]: this.isContainGrid(),
      [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
      [`${prefixCls}-type-${type}`]: !!type,
    });

您可以通过道具传递类名。所以这实际上应该有效，但传递的 className 先行，所以我猜 antd 样式将始终覆盖 styled-components 样式，如果它们相同的话。也许叉子会有帮助？

由第三方 (antd) 风格覆盖的风格化组件

styled components styled overriden by thrid party (antd) style

styled-components

antd