样式化组件在 Typescript 中隐藏 HTML 属性

Question

我创建了一个标准样式组件，例如：

export type ContainerProps = {
  color: string;
};

export const Container = styled.div<ContainerProps>`
  color: ${p => p.color};
  background: blue;
  width: 100%
`;

当我想在 JSX 中使用这个组件时，我拥有所有 HTML 属性作为道具。

有没有办法限制这些，让用户只能使用道具类型指定的道具？

Answer 1

我怀疑你能否实现它，检查实现 here

一种天真的方法可能是创建另一个组件并将其导出。

export const StyledContainer = styled.div<ContainerProps>`
  color: ${(p) => p.color};
  background: blue;
  width: 100%
`;

export const Container: FC<ContainerProps> = (...props) => (
  <StyledContainer {...props} />
);

SC 添加额外的默认 HTML 道具（onClick、onBlur 等），如果我们提供 FC，它将只接受 Type 道具。

export type ContainerProps = {
  color: string,
};
export const Container: FC<ContainerProps> = styled.div<ContainerProps>`
  color: ${(p) => p.color};
  background: blue;
  width: 100%
`;

样式化组件在 Typescript 中隐藏 HTML 属性

Styled Components hiding HTML attributes in Typescript

typescript

styled-components