如何在情感风格的组件中使用来自MUI主题对象的自定义属性和自定义道具?

我添加了一个名为 fTokens 通过TypeScript中的模块扩充到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>;
  }
}

我正试图传递一个自定义道具 rowId 到 TableRow MUI

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;

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

UPDATE-我尝试使用类型断言 as 这个关键字对我有效,但我不知道这是否是解决这个问题的最优雅的方法?

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