我想创建一个调色板，并在整个项目中使用它。所以，我在App.js文件中创建了一个。代码如下：

import { Navigate, Route, Routes } from 'react-router-dom';
import Home from './Components/Home';
import Dashboard from './Pages/Dashboard';
import SignIn from './Pages/SignIn';
import SignUp from './Pages/SignUp';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    black: {
      main: '#0D0D0D',
    },
    white: {
      primary: '#F2F2F2',
    },
    cream: {
      main: '#736555',
    },
    green: {
      main: '#5FD98A',
    },
    greenDark: {
      main: '#5EBF80',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route path='/' exact element={<Navigate to='dashboard' />} />
        <Route path='dashboard' element={<Dashboard />}>
          <Route index element={<Home />} />
        </Route>
        <Route path='login' element={<SignIn />} />
        <Route path='register' element={<SignUp />} />
      </Routes>
    </ThemeProvider>
  );
}

export default App;

但是，当我在Cards组件中使用它时，（它在Home组件中），bgcolor不起作用。下面是我的Cards组件的代码：

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';

function Cards(props) {
  return (
    <ThemeProvider theme={theme}>
      <Card sx={{ bgcolor: 'greenDark.main' }}>
        <Link to={'/'}>
          <CardContent>
            <Typography gutterBottom variant='h5' component='div'>
              Lizard
            </Typography>
            <Typography variant='body2' color='text.secondary'>
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging across all continents except Antarctica
            </Typography>
          </CardContent>
        </Link>
      </Card>
    </ThemeProvider>
  );
}

export default Cards;

我想创建一个调色板，并使用它没有整个项目。有人能帮我一下吗？

**注意：**如果我在Cards组件中再次创建调色板，则颜色可以工作。但这不是我要找的。我用的都是最新版的。React-Router，Material UI，React.