Search code examples
reactjsstyled-components

props are visible as attributes in html element using styled-components

Are height & width keywords for styled-components?

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" />
  );
}

output:

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

  • No, height is visible because its one of JSX attributes, it's not related to styled-components.

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

    You can check its TS type:

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

    See JSX in Depth.