在makeStyles(打字稿)中传播常见样式

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();