Search code examples
typescriptreact-typescript

TSX: Inline style of "padding-top" rejected: Type '{ "padding-top": string; }' is not assignable to type 'Properties<string | number, string & {}>'

In TSX, when I specify an inline style like

<ModalHeading id="modal-1-heading" style={{"padding":"0px"}}>Mailing Address</ModalHeading>

everything works, but when I do the padding-top variation

<ModalHeading id="modal-1-heading" style={{"padding-top":"0px"}}>Mailing Address</ModalHeading>

I get the error

Type '{ "padding-top": string; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and '"padding-top"' does not exist in type 'Properties<string | number, string & {}>'.ts(2322)

enter image description here

Sometimes this also happens with other styles like background-color.

Solution

  • You didn't provide the code of the ModalHeading component, so I'll assume that inside the style it takes values with the CSSProperties type.

    When you want to use such styles (for example padding-top or background-color), inside jsx/tsx inside style you need to get rid of the hyphen, instead you should use the following:

    <ModalHeading id="modal-1-heading" style={{ paddingTop: "0px" }}>
  Mailing Address
</ModalHeading>

    When using background-color, use the same approach - the correct name is backgroundColor