реквизиты видны как атрибуты в элементе html с использованием стилизованных компонентов

Question

Являются ли высота & ширина ключевые слова для стилизованных компонентов?

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>

Answer 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 в подробностях .