样式化组件缺少 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 & 部分>, "className">'.

如何让 typescript 知道我的所有样式组件都会传递这个 className 属性并且它会一直存在？

Answer 1

通过执行以下操作标记Logo as optional 的className 参数应该可以解决此问题：

/* 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 组件的实际 prop 集。