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

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 ?:布尔值|未定义}）=>“普通” | “ bold”类型'（props：{isCurrent ?: boolean | undefined;}）=>“ normal” | “胆大”'   与类型'{isCurrent？没有共同的属性：boolean |   未定义}'。ts（2559）

Answer 1

您不需要功能，您应该能够像这样进行内联逻辑：

Zip

Answer 2

我想应该是：

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

代替

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