CODEWITHSUNDEEP
reactjsstyled-components
ncardez
ncardez

Reputation: 197

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>

Upvotes: 0

Views: 105

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53894

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.

Upvotes: 1

Related Questions