인프런 커뮤니티 질문&답변

윈도우, 안드로이드 환경입니다.

import React from 'react';
import {Pressable, StyleSheet, Text} from 'react-native';

interface CustomButtonProps{
    label: string;
    variant?: 'filled' | 'outlined';
    size?: 'large' | 'medium';

}

function CustomButton({
    label, 
    variant='filled',
    size='large',
}: CustomButtonProps) {
  return (
    <Pressable style={[styles.container, styles[variant], styles[size]]}>
        <Text style={[styles.text, styles['${variant}Text']]}>{label}</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create({
    container:{
        borderRadius: 3,
        justifyContent:'center', 
    },
    filled: {
        backgroundColor:'#C63B64'
    },
    outlined: {
        borderColor:'C63B64',
        borderWidth: 1,

    },
    large: {
        width: '100%',
        paddingVertical: 15,
        alignItems: 'center',
        justifyContent: 'center',
    },
    medium: {
        width: '50%',
        paddingVertical: 12,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        fontSize: 16,
        fontWeight: '700',
    },
    filledText: {
        color: 'white',
    },
    outlinedText: {
        color: '#C63B64',
    },
});

export default CustomButton;

styles['${variant}Text' ]이 부분이 에러가 발생하는데 왜그런 것인가요?

에러메세지는 다음과 같습니다.

[{

"resource": "/c:/Users/dcgn6ec/MatzipApp/front/src/components/CustomButton.tsx",

"owner": "typescript",

"code": "7053",

"severity": 8,

"message": "Element implicitly has an 'any' type because expression of type '\"${variant}Text\"' can't be used to index type '{ container: { borderRadius: number; justifyContent: \"center\"; }; filled: { backgroundColor: string; }; outlined: { borderColor: string; borderWidth: number; }; large: { width: \"100%\"; paddingVertical: number; alignItems: \"center\"; justifyContent: \"center\"; }; medium: { ...; }; text: { ...; }; filledText: { ...; }; ...'.\n Property '${variant}Text' does not exist on type '{ container: { borderRadius: number; justifyContent: \"center\"; }; filled: { backgroundColor: string; }; outlined: { borderColor: string; borderWidth: number; }; large: { width: \"100%\"; paddingVertical: number; alignItems: \"center\"; justifyContent: \"center\"; }; medium: { ...; }; text: { ...; }; filledText: { ...; }; ...'.",

"source": "ts",

"startLineNumber": 18,

"startColumn": 36,

"endLineNumber": 18,

"endColumn": 60

}]