Material ui 在MakeStypes中扩展通用样式（Typescript）

我需要在makeStyles中跨多个样式传播通用样式。这适用于我的jsx，但当我移动到tsx时会出现错误

const abc={
重量：600，
textTransform:'大写'，
}
const useStyles=makeStyles（（）=>({
abcAdd：{
…abc，
颜色：“#B25846”；
},
}))

如果在那一行中使用

@ts ignore

怎么办？

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

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

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

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

const classes = useStyles()

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

const classes=useStyles（）
返回(
)

这种方法适合我，TS编译器没有错误。 我相信，可能会有更好的解决方案，也许您需要为回调定义一些高级类型。但是它需要高级的打字知识，我在这方面不是很有经验。

---

任何更好的解决方案-欢迎

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

cssprroperties

从“@material ui/core/styles/withStyles”导入{cssprroperties}”；
常数abc:CSSP属性={
重量：600，
textTransform:'大写'，
}

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

cssprroperties

从“@material ui/core/styles/withStyles”导入{cssprroperties}”；
从“/some/path/to/javascript”导入{abc}；
const useStyles=makeStyles（（）=>({
abcAdd：{
…abc作为CSP财产，
颜色：“#B25846”，
},
}))

没有必要在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();

---

不适合我，截图-@Eugene这是tsx文件吗？在这里工作：是的，是tsx文件。你说得对，你的解决方案有效。问题只在于我的埃斯林。我想我应该以某种方式重新配置它。