[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 (



<Route index element={} />
<Route path="dashboard" element={


}
/>


)
}

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 (



<Route index element={} />
<Route path="dashboard" element={


}
/>


)

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.