material-ui 主题覆盖:类型CSSProperties上不存在宽度

csbfibhn  于 2022-10-29  发布在  其他
关注(0)|答案(7)|浏览(208)

我使用createMuiTheme覆盖MuiCard,设置自定义的widthheight,这样。

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,
      },
    },
  }),
)

对于widthheight,我遇到以下错误:
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节|
| 浏览器|铬|
| 类型脚本|三、八、三|

ojsjcaue

ojsjcaue1#

我相信我们在https://material-ui.com/guides/typescript/#customization-of-theme中已经讨论过这个问题,您需要告诉TypeScript主题已经更改。

rkttyhzu

rkttyhzu2#

嗨@oliviertassinari谢谢你的回答。根据你的建议我修改了主题类型。我使用cra,所以所有的声明都在react-app-env.d.ts文件中。这是我的主题类型声明,但我仍然有来自typescript的错误信息。

// / <reference types="react-scripts" />
import { Palette } from '@material-ui/core/styles/createPalette'
import { Theme } from '@material-ui/core/styles/createMuiTheme'
import React from 'react'

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    fallback: Palette['primary']
    fog: Palette['primary']
  }
  interface PaletteOptions {
    fallback: PaletteOptions['primary']
    fog: PaletteOptions['primary']
  }
}

declare module '@material-ui/core/styles/createMuiTheme' {
  interface Theme {
    overrides: {
      MuiCard: {
        root: {
          width: React.CSSProperties['width']
          height: React.CSSProperties['height']
          margin: React.CSSProperties['margin']
        }
      }
    }
  }

  interface ThemeOptions {
    overrides: {
      MuiCard: {
        root: {
          width: React.CSSProperties['width']
          height: React.CSSProperties['height']
          margin: React.CSSProperties['margin']
        }
      }
    }
  }
}
y53ybaqx

y53ybaqx3#

@RobelTekle你能分享一个完整的再现吗?这将有助于识别问题。

ztyzrc3y

ztyzrc3y4#

你好@eps1lon,这个项目是在一个私有的存储库中。我试着在codesandbox中创建一个例子
https://codesandbox.io/s/serverless-monad-xfup0?file=/src/index.tsx的最大值
但在codesandbox中,模块扩充根本不起作用。

y3bcpkx1

y3bcpkx15#

这里也一样。带有自定义主题的Typescript材料UI在4.9.11中工作。升级后损坏。
问题是主题的自定义属性为空-即使定义了类型。此问题在“5.0.0-alpha.1”中也持续存在

0wi1tuuw

0wi1tuuw6#

已尝试降级到4.9.10,但仍出现错误

j2datikz

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的条件检查

const rt = theme.overrides?.MuiCard?.root
  if (!rt) {
    return createStyles({
      constainer: {
        position: 'relative',
        backgroundColor: theme.palette.fog.main,
      },
    })
  }
  const root =  rt as CSSProperties
  return createStyles({
    constainer: {
      position: 'relative',
      width: root?.width,
      height: root?.height, 
      margin : root?.margin,
      backgroundColor: theme.palette.fog.main,
    },
  })```

相关问题