我有一个来自MUI的Table组件，但我无法将其转换为深色主题。我使用styled()创建了一个自定义深色主题表，甚至使用sx prop 使其变暗，但这两种方法都不起作用。我们可以看到表看起来有多难看。如何有一个适当的深色主题表，而不使其更复杂：

<TableContainer component={Paper} variant="primary"
    sx={{
      backgroundColor:'primary.main',
      color:'white'
    }}
    >
      <Table aria-label="simple table" variant="primary" 
      sx={{
        color:'white',
        backgroundColor:'primary.main'
      }}
      >
        <TableHead>
          <TableRow>
            <TableCell>Activity</TableCell>
            <TableCell align="right">Tokens</TableCell>
            <TableCell align="right">Amount</TableCell>
            <TableCell align="right">Date</TableCell>
            <TableCell align="right">txn</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.tokens}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.activity}
              </TableCell>
              <TableCell align="right">{row.tokens}</TableCell>
              <TableCell align="right">{row.amount}</TableCell>
              <TableCell align="right">{row.date}</TableCell>
              <TableCell align="right">{row.txn}</TableCell>
              {/* <TableCell align="right">{row.price}</TableCell> */}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

我的主题调色板：

const theme = createTheme({
  palette: {
    primary: {
      main: "#262626"
    },
    secondary: {
      main: "#323232"
    },
  }
});

我尝试styled()创建一个黑暗的主题表，但这也有相同的效果，如上面的截图：

import React from "react";
import { TableContainer } from "@mui/material";
import { alpha, styled } from "@mui/material/styles";

const CustomTable = styled(TableContainer)(({ theme }) => ({
  color: theme.palette.primary.main,
}));
export default function CustomTableContainer({ children }) {
  return <CustomTable>{children}</CustomTable>;
}

有谁知道一个更简单的方法来使一个黑暗的主题表？