Uncaught TypeError: color is undefined || MUI Button & CreateTheme Issue

Question

I am trying to use MUI's createTheme and utilize the Button component. The theme is working for the entire application, however for some reason the component is throwing this error when attempt to use it.

Uncaught TypeError: color is undefined

Here is my theme.js

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
  primary: {
    main: "#aa130f",
  },
  secondary: {
    light: "#726A6A",
    main: "#000000",
  },
  error: {
    main: "#D72A2A",
  },
  warning: {
    main: "#FC7B09",
  },
  info: {
    light: "CDCDCD",
    main: "#902020",    
  },
  success: {
    main: "#09FE00",
  },
  background: {
    default: "#342c2c",
  },
  divider: "#000000" ,
  text: "#000000",
  overrides: {
    MuiButton: {
      label: {
        color: "#f1#f1#f1",
      }
    }
  }
    }
});

Here is my index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./app/App";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import { BrowserRouter } from "react-router-dom";
import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import { theme } from "./utils/theme/themes";
import { CssBaseline } from "@mui/material";

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
    <ThemeProvider theme={theme}>
      <StyledEngineProvider injectFirst>
        <CssBaseline enableColorScheme />
        <BrowserRouter>
            <App />
        </BrowserRouter>
      </StyledEngineProvider>
     </ThemeProvider>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Here is part of my component. list.js

import {
  Box,
 Button
} from "@mui/material";

return(
      <Box sx={{display: "flex"}}>
       <NavBar />
       <Box sx={{
         marginTop: 5,
         display: "flex",
         justifyContent:"space-between"
       }}>
       <Button onClick={handleOpen}>Master List</Button>
         <Button>Test</Button>
         </Box>      
       </Box>
)

I have tried a few different solutions that I have seen on here but I have unable to figure out what is causing the issue. If I remove palette:{} from createTheme the theme colors are the default palette colors and the button component will work however, the app isn't the correct style. I tried overriding the Button in the createTheme and this still didn't work.

Answer 1

I was able to determine that the issue was the way I had defined the "text" color within createTheme.

Original theme.js

  text: "#000000",

Working theme.js

  text: {
    primary: "#000000",
  }