将 React 组件转换为 Typescript 元素隐式具有任何类型，因为类型为string ｜的表达式number' 不能用于索引

我正在将react 组件转换为打字脚本，我有一个问题，我无法以任何方式解决它，我不知道原因是什么，为什么我使用varantStyles[Variant][COLOR]错误.

这些类型主要是我试图创建它工作所必需的类型，但出于某种原因，我可以让它正常工作.

Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type '{ solid: { slate: string; blue: string; white: string; }; outline: { slate: string; white: string; }; }'.
  No index signature with a parameter of type 'string' was found on type '{ solid: { slate: string; blue: string; white: string; }; outline: { slate: string; white: string; }; }'.ts(7053)

import Link from 'next/link'
import clsx from 'clsx'
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';

type ButtonProps = {
  variant: keyof typeof baseStyles;
  color: keyof typeof variantStyles[keyof typeof variantStyles];
  className?: string;
  href?: string;
};

const baseStyles: {
  [baseStyle : string]: string;
} = {
  solid:
    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
  outline:
    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
}

const variantStyles : {
  solid: {
    slate: string;
    blue: string;
    white: string;
  },
  outline: {
    slate: string;
    white: string;
  }
} = {
  solid: {
    slate:
      'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
    blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
    white:
      'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white',
  },
  outline: {
    slate:
      'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
    white:
      'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
  },
}

export function Button({
  variant = 'solid',
  color = 'slate',
  className,
  href,
  ...props
} : ButtonProps ) {
  className = clsx(
    baseStyles[variant],
    variantStyles[variant][color],
    className
  )

  return href ? (
    <Link href={href} className={className} {...props} />
  ) : (
    <button className={className} {...props} />
  )
}