[Bug] Trying to import your template into my project fails

[Stefanmle]

Version

1.0.2

Reproduction link

https://jsfiddle.net

Operating System

Mac

Device

Safari / Chrome

Browser & Version

latest

Steps to reproduce

Try to run it... fails

s: any; }; ... 4 more ...; components: { ...; }; }' is not assignable to parameter of type 'ThemeOptions'. Object literal may only specify known properties, but 'boxShadows' does not exist in type 'ThemeOptions'. Did you mean to write 'shadows'? 91 | palette: { ...colors }, 92 | typography: { ...typography },

93 | boxShadows: { ...boxShadows }, | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 94 | borders: { ...borders }, 95 | functions: { 96 | boxShadow,

What is expected?

That ot should start and build

What is actually happening?

Doesnt start

---

Solution

I followed you guide: https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/#packages

NPM install went just fine.

App.tsx looks like this:

import { useContext, useEffect } from 'react' import { Routes, Route, useNavigate } from 'react-router-dom' import { AuthContext } from './context/auth-context' import RequireAuth from './components/require-auth' import Login from './routes/login' import Dashboard from './routes/dashboard' import React from 'react'

// @mui material components import { ThemeProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline';

// Material Dashboard 2 React themes import theme from "assets/theme";

function App() { const { currentUser } = useContext(AuthContext) const navigate = useNavigate()

// NOTE: console log for testing purposes console.log('User:', !!currentUser);

// Check if currentUser exists on initial render useEffect(() => { if (currentUser) { navigate('/dashboard') } }, [currentUser])

return (

} /> } />

) }

export default App;

Additional comments

It fails due to this:

ERROR in src/assets/theme/theme-rtl.ts:93:3 TS2345: Argument of type '{ direction: "rtl"; breakpoints: { values: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; }; }; palette: { background: any; white: any; text: any; transparent: any; black: any; primary: any; ... 13 more ...; tabs: any; }; ... 4 more ...; components: { ...; }; }' is not assignable to parameter of type 'ThemeOptions'. Object literal may only specify known properties, but 'boxShadows' does not exist in type 'ThemeOptions'. Did you mean to write 'shadows'? 91 | palette: { ...colors }, 92 | typography: { ...typography },

93 | boxShadows: { ...boxShadows }, | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 94 | borders: { ...borders }, 95 | functions: { 96 | boxShadow,

I don't even use the RTL and it was just optional, right?

[Stefanmle]

return (

} /> } />

)

Somehow the theme provider stuffs got removed from paste. But this it what it looks like

[Stefanmle]

[Stefanmle]

Ive boiled it down to that ThemeOptions from MUI does not have boxShadows etc anymore. How should the updated: export default createTheme({ breakpoints: { ...breakpoints }, palette: { ...colors }, typography: { ...typography }, boxShadows: { ...boxShadows }, borders: { ...borders }, functions: { boxShadow, hexToRgb, linearGradient, pxToRem, rgba, },

look like now?

I followed your QuickStart guide by importing everything. package.json have the same dependencies such as MUI versions etc. And I copied the assets folder from the example. The error is in your files: theme/index.ts and theme-dark/index.ts etc.