缺少样式组件的className

Question

我已经定义了这样的"Logo“组件：

const Logo = ({ className }: { className: string }) => (
  <Link to="/" className={className}>
    <img src={logo} alt="logo" />
  </Link>
);

它具有通过传递className进行样式设计的公开可能性。

但当我把它和打字稿用在一起时：

const StyledLogo = styled(Logo)`
  margin-left: 4.5rem;
`;

..。在某个地方呈现：

<StyledLogo />

那我就犯了这样的错误：

错误：(33，6) TS2741:属性'className‘在类型'{}’中缺失，但在类型'Pick & Partial>‘、"className">’中是必需的。

如何让类型记录知道我所有的样式组件都将传递这个className属性，并且它将一直在那里？

Answer 1

通过执行以下操作，应该可以通过标记className 可选的Logo参数来解决这个问题：

/* Add ? after className */
const Logo = ({ className }: { className?: string }) => (
  <Link to="/" className={className}>
    <img src={logo} alt="logo" />
  </Link>
);

const StyledLogo = styled(Logo)`
  margin-left: 4.5rem;
`;

/* No ts error reported now */
<StyledLogo />

希望这能帮上忙！

更新

或者，为了避免上述可选的className方法，您可以采用以下方法：

/* Define type to minimise verbosity */
type LogoProps = { className: string };

/* Define strongly typed Logo function with defined type */
const Logo = (props: LogoProps) => (
  <Link to="/" className={props.className}>
    <img src={"logo"} alt="logo" />
  </Link>
);

/* TS explicitly aware of prop set being passed to Logo via type */
export const StyledLogo = styled((props: LogoProps) => <Logo {...props} />)`
  margin-left: 4.5rem;
`;

 /* Usage */
 <StyledLogo />

此方法确保TS知道传递给Logo组件的实际支持集。