我使用createMuiTheme
覆盖MuiCard
,设置自定义的width
和height
,这样。
const theme = createMuiTheme({
palette: {
type: 'light',
primary: {
main: primaryColor,
},
secondary: {
main: secondaryColor,
},
fallback: {
main: fallback,
},
fog: {
main: fog,
},
},
overrides: {
MuiCard: {
root: {
width: 300,
height: 276,
margin: 15,
[breakpoints.down('sm')]: {
margin: 5,
},
},
},
},
props: {
MuiSkeleton: {
animation: 'pulse',
},
MuiAvatar: {
variant: 'rounded',
},
},
})
组件尺寸符合要求。
当我试图以其他组件的样式访问这些值时,问题就出现了。
export const useStyle = makeStyles((theme: Theme) =>
createStyles({
cardSkeleton: {
width: theme.overrides?.MuiCard?.root?.width ?? 300,
height: theme.overrides?.MuiCard?.root?.height ?? 276,
margin: 15,
[theme.breakpoints.down('sm')]: {
margin: 5,
},
},
}),
)
对于width
和height
,我遇到以下错误:Property 'width' does not exist on type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'. Property 'width' does not exist on type 'PropsFunc<{}, CreateCSSProperties<{}>>'.
- 最新版本中存在此问题。
- 我已经搜索了此存储库的issues,并认为这不是重复的。
您的环境🌎
| 技术人员|版本号|
| - -|- -|
| 材料-UI|版本4.10.2|
| React|第16.11.0节|
| 浏览器|铬|
| 类型脚本|三、八、三|
7条答案
按热度按时间ojsjcaue1#
我相信我们在https://material-ui.com/guides/typescript/#customization-of-theme中已经讨论过这个问题,您需要告诉TypeScript主题已经更改。
rkttyhzu2#
嗨@oliviertassinari谢谢你的回答。根据你的建议我修改了主题类型。我使用cra,所以所有的声明都在
react-app-env.d.ts
文件中。这是我的主题类型声明,但我仍然有来自typescript的错误信息。y53ybaqx3#
@RobelTekle你能分享一个完整的再现吗?这将有助于识别问题。
ztyzrc3y4#
你好@eps1lon,这个项目是在一个私有的存储库中。我试着在codesandbox中创建一个例子
https://codesandbox.io/s/serverless-monad-xfup0?file=/src/index.tsx的最大值
但在codesandbox中,模块扩充根本不起作用。
y3bcpkx15#
这里也一样。带有自定义主题的Typescript材料UI在4.9.11中工作。升级后损坏。
问题是主题的自定义属性为空-即使定义了类型。此问题在“5.0.0-alpha.1”中也持续存在
0wi1tuuw6#
已尝试降级到4.9.10,但仍出现错误
j2datikz7#
我已经创建了一个基于你的代码沙箱的Github存储库。
https://github.com/ukris/material-ui-theme-overrides的最大值
主控形状对应于材料-UI- 4.9.11
以及分支4.11.0和5.0.0 α 2。
在您的情况下,由于某些原因,所有版本都可以使用更改
有一个警告:
// @ ts-忽略
常量根:CSS属性=主题。覆盖?。MuiCard?。根
如果// @ts-ignore是不可接受,那么我想你可以做一个条件检查,并返回两个不同的对象。任何,因为一些解决方案似乎暗示-我认为这是不是一个可以接受的解决方案。
下面是不带@ts-ignore的条件检查