带有类名的 TypeScript：没有索引签名

Question

我正在编写一个 React 应用程序，我正在使用 classnames 来帮助我设计样式。

我这样加入我的类名：

const appBarClasses = classNames({
  [classes.appBar]: true,
  [classes[color]]: color,
  [classes.fixed]: fixed
});

在我设置颜色的行中，TypeScript 抱怨：

[ts] Element implicitly has an 'any' type because type 'Record<"fixed" | "appBar" | "primary" | "transparent", string>' has no index signature.

我尝试了 as 或 : string 的无数变体，但无法让它工作。我如何告诉 TSLint 这是一个字符串？

编辑： 这是我如何获得类。我使用 material-ui 作为我的组件，我使用它的 WithStyles 函数。

import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import createStyles from "@material-ui/core/styles/createStyles";

export interface Props extends WithStyles<typeof styles> {
  brand: string;
  fixed: boolean;
  changeColorOnScroll: { height: number; color: string };
  color: string;
}

styles 是用 createStyles 创建的对象。

这是 styles 的样子：

import createStyles from "@material-ui/core/styles/createStyles";
import { primaryColor } from "../../styles";

const navBarStyle = createStyles({
  appBar: {
    alignItems: "center",
    backgroundColor: "#fff",
    border: "0",
    borderRadius: "3px",
    boxShadow:
      "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)",
    color: "#555",
    display: "flex",
    flexFlow: "row nowrap",
    justifyContent: "flex-start",
    marginBottom: "20px",
    padding: "0.625rem 0",
    position: "relative",
    transition: "all 150ms ease 0s",
    width: "100%"
  },
  fixed: {
    position: "fixed"
  },
  primary: {
    backgroundColor: primaryColor,
    boxShadow:
      "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(156, 39, 176, 0.46)",
    color: "#FFFFFF"
  },
  transparent: {
    backgroundColor: "transparent !important",
    boxShadow: "none",
    color: "#FFFFFF",
    paddingTop: "25px"
  }
});

export default navBarStyle;

Answer 1

我成功了！

在道具界面中，我必须这样定义 color：

color: "transparent" | "primary";

带有类名的 TypeScript：没有索引签名

TypeScript with classnames: No index signature

class-names

typescript

tslint

typescript-typings

typescript-types