LoginSignup
2
1

More than 5 years have passed since last update.

glamorous-native + Typescript propsを渡すと怒られる件

Posted at

Issue

ReactNative + Typescript下でNativeBaseのTextコンポーネントにglamorous-nativeでpropsを渡してstyle定義しようとする以下のようなケースで怒られました。

import React from 'react';
import { Component } from 'react';
import { Text } from 'native-base';
import glamorous from 'glamorous-native';

const Foo = (props:Props)=>{
    return (
        <StyledSubLabel statuColor="red">ラベル</StyledSubLabel>
    );
}

const StyledSubLabel = glamorous(Text)({
    fontWeight: 'bold'
}, (props)=> ({ color: props.statuColor }));

Error!!

Property 'statuColor' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes, any, any>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'.

対策

glamorous(Component)({...styles}, event)で受け取るprops引数を型定義してあげると収まりました。

type StyledSubLabelProps = {
    statuColor: string
}
const StyledSubLabel = glamorous(Text)({
    fontWeight: 'bold'
}, (props:StyledSubLabelProps)=> ({ color: props.statuColor }));

ちなみに glamorous-nativeでは fontSize={10} というようなstyle属性と同名のpropsを渡すと style={{fontSize: 20}} と同じになるようでらしいのですが、同様にTypescriptだと怒られます。NativeBaseのコンポーネントを渡してるからかなとglamorous-nativeのコンポーネントでやってみましたが結果は同じでした。

上の対策同様に型を fontSize: number と定義してあげると怒らないのですが、propsが渡ってないみたいで変化はありませんでした。

謎い… 🙃

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1