>source

저는 Material ui 버전 5를 사용하고 있습니다. 제 모든 구성 요소를 둘러싸고 있는 사용자 정의 테마가 있습니다.

내 구성 요소 중 하나에서 내 테마에 따라 용지에 패딩을 주려고 하지만 다음 오류가 발생합니다.

'DefaultTheme' 유형에 'spacing' 속성이 없습니다.

   <AppProvider>            <Theme>                <Layout>                    <ProtectedRoute>                        <Component {...pageProps} />                    </ProtectedRoute>                </Layout>            </Theme>        </AppProvider>

campaign.tsx

const useStyles= makeStyles((theme)=> ({
    paper: {
        padding: theme.spacing(3),
    },
}));
export default function Campaign(props: ICampaginProps): ReactElement | null {
    const classes= useStyles();

테마.tsx

const DEFAULT_THEME= createTheme({
    typography: {
        fontSize: 12,
    },
    palette: {
        mode: "light",
        primary: {
            main: "#212121",
        },
        secondary: {
            main: "#fafafa",
        },
    },
});

  • 답변 # 1

    다음에서 제안한 사항을 시도해 보셨습니까?

    [Types] 속성 "palette", "spacing"이 'DefaultTheme' 유형에 존재하지 않습니다.

    이후메이크스타일이제 다음에서 내보냅니다.@mui/스타일하는 패키지 에 대해 모른다주제코어 패키지에서. 이 문제를 해결하려면 다음을 수행해야 합니다. 보강하다기본 테마(빈 개체)@mui/스타일~와 함께주제~에서 핵심.

    TypeScript 프로젝트

    이 스니펫을 테마 파일에 넣습니다.

    //it could be your App.tsx file or theme file that is included in your tsconfig.json
    import { Theme } from '@mui/material/styles';
    declare module '@mui/styles/defaultTheme' {
      //eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
      interface DefaultTheme extends Theme {}
    }
    

    자바스크립트 프로젝트

    IDE(예: VSCode)가 다음에서 유형을 유추할 수 있는 경우d.ts파일, 만들다index.d.ts이 스니펫이 있는 src 폴더에:

    //index.d.ts
    declare module "@mui/private-theming" {
      import type { Theme } from "@mui/material/styles";
      interface DefaultTheme extends Theme {}
    }
    

  • 이전 ajax.beginform()이 작동하지 않음 asp.net .net Framework 4.7.2
  • 다음 permissions : v10 이상에서 typo3 사용자 권한을 사용하는 모범 사례는 무엇입니까?