Question

我需要在makeStyles内的多个样式中分布通用样式。这适用于我的jsx，但是当我转到tsx时会出错。

const abc = {
    fontWeight: 600,
    textTransform: 'uppercase',
}

const useStyles = makeStyles(() => ({
    abcAdd: {
        ...abc,
        color: '#B25846';
    },
}))

Answer 1

如果对象是在TypeScript中声明的，则将其类型设置为CSSProperties

import { CSSProperties } from "@material-ui/core/styles/withStyles";

const abc: CSSProperties = {
    fontWeight: 600,
    textTransform: 'uppercase',
}

或者，如果对象来自JavaScript，则将其强制转换为CSSProperties

import { CSSProperties } from "@material-ui/core/styles/withStyles";
import { abc } from "./some/path/to/javascript";

const useStyles = makeStyles(() => ({
    abcAdd: {
        ...abc as CSSProperties,
        color: '#B25846',
    },
}))

Answer 2

我找到了一个简单的解决方法-将“ any”添加为回调函数类型

const abc = {
    fontWeight: 600,
    textTransform: 'uppercase',
}

const useStyles = makeStyles((): any => ({
    abcAdd: {
        ...abc,
        color: '#B25846';
    },
}))

使用该类时，请用引号将其调用：

const classes = useStyles()

return (
  <Box className={classes['abcAdd']}>
)

这种方式对我有用，TS编译器没有错误。我敢肯定，可能会有更好的解决方案，也许您需要为回调定义一些高级类型。但这需要打字稿方面的高级知识，我对此不太有经验。任何更好的解决方案-欢迎光临！

Answer 3

如果您在该行上使用@ts-ignore怎么办？

Answer 4

无需在 makeStyles 内传播 JSON。您可能想要传播它的原因可能只有一个，因为您想将注释 CSS 保留在一个文件中。

简单地为普通css制作一个注释文件：

import {
  makeStyles,
} from '@material-ui/core';
const useCommonStyles = makeStyles(() => ({
  abcAdd:{ fontWeight: 600,
       textTransform: 'uppercase',}
}));

export default useCommonStyles;

在任何地方都可以这样使用

import useCommonStyles from "src/utils/commonStyles";
const commonClasses = useCommonStyles();

在makeStyles（Typescript）中传播通用样式

4 个答案: