通过 props 控制组件的样式属性

Question

有以下代码：

export type BreadcrumbItemProps = {
  isCurrent?: boolean;
};

const isCurrent = (props: { isCurrent?: boolean }) => props.isCurrent ? 'normal' : 'bold';

export const Item = styled.span<BreadcrumbItemProps>`
  display: inline;
  padding: 10px;
  cursor: default;
  font-weight: ${ props => isCurrent(isCurrent)};
`;

根据 isCurrent 道具我想控制字体，正常或粗体，尝试这样做我得到以下错误：

const isCurrent: (props: { isCurrent?: boolean | undefined; }) => "normal" | "bold" Type '(props: { isCurrent?: boolean | undefined; }) => "normal" | "bold"' has no properties in common with type '{ isCurrent?: boolean | undefined; }'.ts(2559)

Answer 1

我猜应该是：

font-weight: ${ props => isCurrent(props)};

而不是

font-weight: ${ props => isCurrent(isCurrent)};

Answer 2

您不需要函数，您应该能够像这样内联逻辑：

export type BreadcrumbItemProps = {
  isCurrent?: boolean;
};

export const Item = styled.span<BreadcrumbItemProps>`
    display: inline;
    padding: 10px;
    cursor: default;
    font-weight: ${ props.isCurrent ? 'normal' : 'bold'};
`;

通过 props 控制组件的样式属性

Control styling attribute of component via props

typescript

reactjs

styled-components