使用 prop 作为 typescript 的样式索引

Question

我目前正在构建一个具有道具的组件，并希望将道具用作 styles 的索引，但出现 typescript 错误：

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“{ success: { color: string; }; 警告：{ 颜色：字符串； }; 错误：{ 颜色：字符串； }; }'。 在类型 '{ success: { color: string; 上找不到参数类型为 'string' 的索引签名 }; 警告：{ 颜色：字符串； }; 错误：{ 颜色：字符串； }; }'.ts(7053)

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

type InfoBoxProps = {
  text: string
  context: string
}

const InfoBox: React.FC<InfoBoxProps> = ({ text, context }) => {
  return (
    <View>
      <Text style={styles[context]}>{text}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  success: {
    color: 'green'
  },
  warning: {
    color: 'yellow'
  },
  error: {
    color: 'red'
  }
})

export default InfoBox

Answer 1

尝试将context定义为：

type InfoBoxProps = {
  text: string
  context: keyof typeof styles
}