CSSProperties TextAlignProperty type error

Question

I'm using React 16.8 with Typescript "@zeit/next-typescript": "1.1.0"

I have inline-style interface. And There is object using IInputInlineStyle interface.

interface IInputInlineStyle {
    padding: string;
    textAlign?: string;
    paddingLeft?: string | number;
    color?: string;
}

 const inputInlineStyle: IInputInlineStyle = {
            padding,
            textAlign
        };

But I got this error message.

Error:(155, 21) TS2322: Type 'IInputInlineStyle' is not assignable to type 'CSSProperties'.

Types of property 'textAlign' are incompatible.

Type 'string' is not assignable to type 'TextAlignProperty'.

How can I fix this problem?

Oyedeji Peace Oyedeji Peace · Accepted Answer · 2020-05-12T14:34:10

Since Typescript 3.4 you can make use of the as const notation:

const inputInlineStyle = {
  textAlign: 'center' as const
};

Source - https://github.com/typestyle/typestyle/issues/281#issuecomment-535359254

CSSProperties TextAlignProperty type error

2 Answers