garronej / ts-ci

🚀 A project starter for module publisher
MIT License
349 stars 20 forks source link

Uncaught TypeError: theme.spacing is not a function #8

Closed aleccaputo closed 2 years ago

aleccaputo commented 2 years ago

I know this is something i'm doing wrong, but I can't seem to figure it out. I just refactored everything to use the tss-api in mui 5. image

My structure is as follows

AppThemeProvider.tsx

import { CacheProvider } from '@emotion/react';
import { LocalizationProvider } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import { createTheme, ThemeProvider } from '@mui/material';
import * as React from 'react';
import createCache from 'tss-react/@emotion/cache';
import { defaultTheme, darkTheme } from '../../themes/default';

export const muiCache = createCache({
    key: 'mui',
    prepend: true
});

interface IAppThemeProviderProps {
    themeType: 'dark' | 'light';
}
const AppThemeProvider: React.FC<IAppThemeProviderProps> = ({ children, themeType }) => (
    <CacheProvider value={muiCache}>
        <ThemeProvider theme={createTheme(themeType === 'light' ? defaultTheme : darkTheme)}>
            {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
            <LocalizationProvider dateAdapter={AdapterDateFns}>
                {children}
            </LocalizationProvider>
        </ThemeProvider>
    </CacheProvider>
);

export default AppThemeProvider;

makeStyles.ts

import { createMakeStyles } from 'tss-react';
import { defaultTheme } from './themes/default';
import { ICustomTheme } from './themes/types';

function useTheme() {
    // I need to cast this. Before createTheme turned my theme from ThemeOptions to type Theme
    return defaultTheme as ICustomTheme;
}

export const { makeStyles } = createMakeStyles({ useTheme });

usage:

const useStyles = makeStyles()((theme: ICustomTheme) => ({
    notificationSettingsContainer: {
        margin: theme.spacing(1, 0, 2, 0),
        padding: theme.spacing(2)
    },
    secondaryButton: {
        borderRadius: theme.spacing(0.5),
        margin: theme.spacing(1, 0, 0, 0),
        textTransform: 'uppercase'
    }
}));

I'm not sure what i'm missing here. Any help is greatly appreciated.

aleccaputo commented 2 years ago

I'm sorry, wrong repo