Failed prop type: MUI: Combining elevation={8} with variant="outlined" has no effect when import Dashboard template

[shenshouer]

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

When click on switch Theme, the error appear on broswer console

Expected behavior

No error output on browser console

Context

App.tsx code as follow:

import Dashboard from './dashboard/Dashboard'

function App() {

  return <Dashboard />
}

export default App

The broswer console:

[vite] connecting... client:495:8
[vite] connected. client:614:14
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools react-dom.development.js:29895:16
Warning: Failed prop type: MUI: Combining `elevation={8}` with `variant="outlined"` has no effect. Either use `elevation={0}` or use a different `variant`.
Paper2@http://localhost:5173/node_modules/.vite/deps/chunk-PKQ5ABP5.js?v=82043679:102:32
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Transition2@http://localhost:5173/node_modules/.vite/deps/chunk-54CD4ILF.js?v=82043679:81:30
Grow2@http://localhost:5173/node_modules/.vite/deps/chunk-CSTVWFPC.js?v=82043679:382:7
FocusTrap@http://localhost:5173/node_modules/.vite/deps/chunk-XCTFHVA4.js?v=82043679:128:7
div
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Portal2@http://localhost:5173/node_modules/.vite/deps/chunk-H2GXMI5I.js?v=82043679:42:7
Modal2@http://localhost:5173/node_modules/.vite/deps/chunk-XCTFHVA4.js?v=82043679:1154:32
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Popover2@http://localhost:5173/node_modules/.vite/deps/chunk-CSTVWFPC.js?v=82043679:652:32
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Menu2@http://localhost:5173/node_modules/.vite/deps/chunk-CSTVWFPC.js?v=82043679:1147:32
ColorModeIconDropdown@http://localhost:5173/src/shared-theme/ColorModeIconDropdown.tsx:28:41
div
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Grid2@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:3658:38
div
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Grid2@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:3658:38
Header
div
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Grid2@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:3658:38
main
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Box3@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:780:35
div
withEmotionCache2/<@http://localhost:5173/node_modules/.vite/deps/chunk-64AL7DTM.js?v=82043679:1374:46
Box3@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:780:35
DefaultPropsProvider@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:1842:30
RtlProvider@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:1818:21
ThemeProvider@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:1777:7
ThemeProvider2@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:1929:7
CssVarsProvider@http://localhost:5173/node_modules/.vite/deps/chunk-XPKCSHL7.js?v=82043679:2355:9
ThemeProvider@http://localhost:5173/node_modules/.vite/deps/chunk-VVBIVGSF.js?v=82043679:343:23
AppTheme@http://localhost:5173/src/shared-theme/AppTheme.tsx:26:33
Dashboard
App react.development.js:209:29
[vite] hot updated: /src/dashboard/components/CardAlert.tsx client:223:18

Your environment

npx @mui/envinfo

firefox and chrome: 
  % npx @mui/envinfo
Need to install the following packages:
@mui/[email protected]
Ok to proceed? (y) y


  System:
    OS: macOS 15.0.1
  Binaries:
    Node: 20.16.0 - ~/.local/share/mise/installs/node/20/bin/node
    npm: 10.8.1 - ~/.local/share/mise/installs/node/20/bin/npm
    pnpm: 9.12.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 130.0.6723.70
    Edge: Not Found
    Safari: 18.0.1
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/icons-material: ^6.1.5 => 6.1.5 
    @mui/material: ^6.1.5 => 6.1.5 
    @mui/x-charts: ^7.21.0 => 7.21.0 
    @mui/x-data-grid: ^7.21.0 => 7.21.0 
    @mui/x-data-grid-pro: ^7.21.0 => 7.21.0 
    @mui/x-date-pickers: ^7.21.0 => 7.21.0 
    @mui/x-date-pickers-pro: ^7.21.0 => 7.21.0 
    @mui/x-tree-view: ^7.21.0 => 7.21.0 
    @types/react: ^18.3.11 => 18.3.12 
    react:  18.3.1 
    react-dom:  18.3.1 
    typescript: ~5.6.2 => 5.6.3

Search keywords: dashboard

[sai6855]

@shenshouer can you share link of the template?

[zanivan]

@siriwatknp any idea on what could be happening here?

[shenshouer]

@shenshouer can you share link of the template?

Sorry, I tested it in my local, how and where can I deploy the demo to the online?

[shenshouer]

Everything is ok if remove variant: 'outlined' from the shared-theme/ColorModeIconDropdown.tsx ;

https://github.com/mui/material-ui/blob/v6.1.6/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js#L67

...
      <Menu
        anchorEl={anchorEl}
        id="account-menu"
        open={open}
        onClose={handleClose}
        onClick={handleClose}
        slotProps={{
          paper: {
            // variant: 'outlined',           <-------- here
            sx: {
              my: '4px',
            },
          },
        }}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      >
...

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@shenshouer How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.