[Question]: How to custom StylProps type with Typescript

[HuuNguyen312]

Dear @danilowoz

interface CustomProp extends StylProps {
  color: string
}
const MyText = styl(Text)((props: CustomProp) => ({
  color: props.color,
}))

Please help me create CustomProp.
Thanks

[HuuNguyen312]

When I used Dynamic styles following Readme file

import styl from "react-native-styl"
import { Text } from "react-native"

const ColoredText = styl(Text)(({ props }) => ({
  color: props.color,
}))

<ColoredText color="red">Lorem ipsum</ColoredText>

Two warnings occur

• TS2345: Argument of type '{ new (data?: string | undefined): Text; prototype: Text; }' is not assignable to parameter of type 'ComponentType'.   Type '{ new (data?: string | undefined): Text; prototype: Text; }' is not assignable to type 'ComponentClass<any, any>'.     Type 'Text' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, render, and 3 more.

• TS2339: Property 'color' does not exist on type 'DefaultProps'

[danilowoz]

Hey, please take a look at the example below. Probably, you're not properly assigning the interface:

import styl from "react-native-styl"
import { Text } from "react-native"

interface CustomProp extends StylProps {
  color: string
}

// You need to pass the interface as a generic 👇 
const Title = styl(Text)<CustomProp>(({ props }) => ({
  color: props.color,
}))

<CustomProp color="blue">Lorem ipsum</CustomProp>