我是否需要传递className属性来扩展组件的样式?

时间:2019-09-11 16:51:15

标签: javascript reactjs styled-components

我创建了Card组件,并希望通过扩展对其进行修改。 但是为了做到这一点,我需要传递一个名为className的道具,例如下面的代码。

import React from 'react';
import { CardStyle } from './style';
import { CardInterface } from './interface';

const Card = (props: CardInterface) => {
  const { children, className } = props;

  return (
    <CardStyle className={className}>
      {children}
    </CardStyle>
  );
};

export default Card;

我的问题是,没有其他方法可以不需要将className道具传递给组件来扩展它了吗?

我尝试扩展Card的代码段。

export const CardWithTabs = styled(Card)`
  border-radius: 0px;
`;

1 个答案:

答案 0 :(得分:0)

我希望import { CardInterface } from './interface';看起来像这样:

export interface CardInterface {
  className: string;
}

因此,如果const Card = (props: CardInterface),则在扩展CardWithTabs = styled(Card)时,CardWithTabs将继承CardInterface并且还需要className

<CardWithTabs className="bleh" />

要不需要className,可以在className中使用interface?设置为可选:

export interface CardInterface {
  className?: string;
}

或者,在扩展Card时,不要传递className道具:

// You will need to add an interface for CardComponent of course
const CardComponent = ({
  children,
  className,
  ...rest
}) => <Card {...rest}>{children}</Card>;

const CardWithTabs = styled(CardComponent)`
  /* Your styles */
`;

此答案基于所提供代码的假设。