material-ui 错误 TS2345:类型为 'TemplateStringsArray' 的参数不能分配给类型为 'CreateCSSProperties' 的参数,

55ooxyrt  于 6个月前  发布在  其他
关注(0)|答案(3)|浏览(55)

重现步骤

步骤:

  1. Git克隆此项目并拉取PR:Image build using backstage dockerfile dont run on ocp q-shift/backstage-playground#2
  2. cd plugins/quarkus
  3. yarn install; yarn tsc

当前行为

当我们使用以下版本的material-ui执行yarn tsc时,以下代码(见此处)

onst Tag: ComponentClass = styled(({ label, onDelete, ...props }) => (
    <div {...props}>
        <span>{label}</span>
        <CloseIcon onClick={onDelete} />
    </div>
))`
  display: flex;
  align-items: center;
  height: 24px;
  margin: 2px;
  line-height: 22px;
  background-color: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  box-sizing: content-box;
  padding: 0 4px 0 10px;
  outline: 0;
  overflow: hidden;

  &:focus {
    border-color: #40a9ff;
    background-color: #e6f7ff;
  }

  & span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  & svg {
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
  }
`;

会产生以下错误:

src/scaffolder/QuarkusExtensionList.tsx:57:3 - 
error TS2345: Argument of type 'TemplateStringsArray' is not assignable to parameter of type
'CreateCSSProperties<(value: string, index: number, array: readonly string[]) => unknown> | ((props: { theme: Theme; } & ((value: string, index: number, array: readonly string[]) => unknown)) => CreateCSSProperties<...>)'.

 57 ))`
      ~
 58   display: flex;
    ~~~~~~~~~~~~~~~~
... 
 86   }
    ~~~
 87 `;
    ~
  • "@material-ui/core": "^4.12.4",
  • "@material-ui/lab": "^4.0.0-alpha.61"

预期行为

不应报告错误

上下文

我尝试将我的项目发布为npmjs.org模块,在这种情况下需要运行"yarn tsc"。这就是我在本地直接在后台使用插件时不会出现这个错误的原因是。

您的环境

System:
    OS: macOS 13.6.3
  Binaries:
    Node: 19.9.0 - ~/.nvm/versions/node/v19.9.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v19.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.199
    Edge: Not Found
    Safari: 17.2
  npmPackages:
    @emotion/react:  11.11.3 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.31 
    @mui/core-downloads-tracker:  5.15.4 
    @mui/material:  5.15.4 
    @mui/private-theming:  5.15.4 
    @mui/styled-engine:  5.15.4 
    @mui/system:  5.15.4 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.4 
    @types/react:  17.0.74 
    styled-components: ^6.1.8 => 6.1.8 
    typescript:  5.1.6

以及typeconfig.json

{
  "extends": "@backstage/cli/config/tsconfig.json",
  "include": [
    "src",
  ],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "noImplicitAny": false,
    "outDir": "dist-types",
    "rootDir": "."
  }
}

搜索关键词:TS2345, typescript, not assignable to parameter of type

zqdjd7g9

zqdjd7g91#

你能尝试将模板字符串转换为CSS对象吗?

c90pui9n

c90pui9n2#

转换模板字符串
哪个模板字符串?

fnvucqvd

fnvucqvd3#

尝试这个:
x1a2b1x

相关问题