typescript - Css Properties and TextStyle Types

Question

I have a textStyle which is a type of TextStyle (it comes from react-native types) or React.CSSProperties. I want to pass this type to style attribute for html span element. style attribute accepts type of React.CSSProperties. My interface and span element is:

export interface IBaseTextStyleType {
    textStyle:  React.CSSProperties | TextStyle
}

<span style={style.textStyle}>
    {this.props.children || this.props.text}
</span>

I got this error in style of span:

Type 'CSSProperties | TextStyle' is not assignable to type 'CSSProperties'.
  Type 'TextStyle' is not assignable to type 'CSSProperties'.
    Types of property 'aspectRatio' are incompatible.
      Type 'number' is not assignable to type 'AspectRatio'.

How can I rid of this error ?

question from:https://stackoverflow.com/questions/65932634/css-properties-and-textstyle-types

Answer 1

You try to define type of style.textStyle like this:

<span style={style.textStyle as React.CSSProperties}>
    {this.props.children || this.props.text}
</span>