Question

我对打字稿比较陌生，无法解决以下问题：我用以下几种类型扩充了我的材料Ui主题：

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    customColors: CustomColors;
  }

  interface PaletteOptions {
    customColors: CustomColors;
  }

  interface CustomColors {
    userColors: UserColors;
    listFiltersBg?: string;
  }

  interface UserColors {
    ROPRIETOR: Color;
    ASSOCIATE: Color;
    MASTER: Color;
    JOURNEYMAN_QUALIFIED: Color;
    JOURNEYMAN_GRADUATED: Color;
    JOURNEYMAN_TRAINED: Color;
    LABORER: Color;
    OFFICEWORKER: Color;
  }
}



const theme = createMuiTheme(
    {
      palette: {
        type: darkMode ? 'dark' : 'light',
        customColors: {
          userColors: {
            ROPRIETOR: colors.green,
            ASSOCIATE: colors.lightGreen,
            MASTER: colors.pink,
            JOURNEYMAN_QUALIFIED: colors.deepPurple,
            JOURNEYMAN_GRADUATED: colors.purple,
            JOURNEYMAN_TRAINED: colors.indigo,
            LABORER: colors.teal,
            OFFICEWORKER: colors.lime,
          },
          listFiltersBg: colors.grey[200],
        },
      },
    },
    deDE,
  );

但是当我尝试基于动态值获取颜色时，我总是无法定义，而不是相应的颜色对象：

export const getUserColor: GetUserColor = (position = 'PROPRIETOR', { palette }, ) => {
  const userColor = palette.customColors.userColors[position as keyof UserColors];

  console.log('USER_COLOR', userColor); // logs "undefined"

  return usercolor[500];
  
};

我在这里做错了什么？任何帮助表示赞赏！

Answer 1

结论：注意错别字！！如果不确定，请向后阅读变量名-否则您会脑子里填写缺失的字母-至少我是这样做的！

材质用户界面：使用打字稿“ keyof”从增强主题中获取值

1 个答案: