Question

我有一个简单的样式组件正在应用于antd组件：

import { Card } from 'antd';

export const UsageCard = styled(Card)`

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

这会创建一个div类，其属性类似于：“ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered”

.hBLsXc是我的样式组件。不幸的是，我的样式组件中的2px填充被ant-card（0px）覆盖。

知道为什么会这样吗？样式组件应该首先出现，因为它是在第三方组件上实现的。这是从多次重读的第三方组件转发className的问题吗？在任何情况下，我都不知道这应该如何工作。

感谢您的帮助！

Answer 1

className必须放入卡片组件中，否则无法使用。您应该与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,
    });

您可以通过props传递className。所以这实际上应该有效，但传递的className首先出现，所以我猜antd样式总是会覆盖styled-components样式，如果它们是相同的话。也许叉子有帮助吗？

由thrid party（antd）样式覆盖的样式组件样式

1 个答案: