Typescript 如何将 MUI 主题对象的自定义属性与情感样式组件中的自定义props 一起使用

我已经通过在TypeScrip中的模块增强将名为fTokens的自定义对象添加到MUI主题

这就是我的theme.d.ts美元的样子

declare module "@mui/material/styles" {
  interface FPalette { ...
  }

  interface FTokens { ...
  }

  interface FSpacing { ...
  }

  interface Theme {
    fPalette: FPalette;
    fTokens: FTokens;
    fSpacing: FSpacing;
  }

  interface ThemeOptions {
    fPalette: Partial<FPalette>;
    fTokens: Partial<Tokens>;
    fSpacing: Partial<FSpacing>;
  }
}

我正在试着通过MUI的定制props rowId到TableRow

import MUITableRow, { TableRowProps as MUITableRowProps } from "@mui/material/TableRow";
import { styled } from "@mui/system";

interface TableRowProps {
  rowId: number;
}

const TableRow = styled(MUITableRow)<TableRowProps>(({ theme }) => ({
  backgroundColor: theme.fTokens.surfaceHigh,
}));

export default TableRow;

我收到的打字错误为Property 'fTokens' does not exist on type 'Theme'.ts(2339)

更新-我try 了使用as关键字的类型断言，但我不知道这是否是解决这个问题的最优雅的方法？

const TableRow = styled(MUITableRow)<TableRowProps>(({ theme, rowId }) => ({
  backgroundColor:
    rowId % 2 === 0
      ? (theme as Theme).fTokens.surfaceHigh
      : (theme as Theme).fTokens.surfaceHighest,
}));