props 使用 styled-components 作为 html 元素中的属性可见答案

【问题标题】：props are visible as attributes in html element using styled-componentsprops 使用 styled-components 作为 html 元素中的属性可见
【发布时间】：2020-06-22 04:52:50
【问题描述】：

样式组件是 height 和 width 关键字吗？

VSpace.tsx

type VSpaceProps = { readonly height?: string; };

export const VSpace = styled.div`
  height: ${({ height }: VSpaceProps) => height};
  width: 100%;
`;

VSpace.defaultProps = { height: '.5rem' };

index.tsx：

function App() {
  return (
    <VSpace height="0.4rem" />
  );
}

输出：

<div height="0.4rem" class="VSpace-sc-18gziyv-1 kkKpPd"></div>

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

不，height 是可见的，因为它是 JSX 属性之一，它与样式组件无关。

// height is a JSX.attribute type of div element
function App() {
  return (
    <div height="0.4rem" />
  );
}

你可以查看它的TS类型：

Type '{ height: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

见JSX in Depth。

【讨论】：