How use the Theme properties in MakeStyles - css

Question

I have this simple component:
import React from "react";
import { Grid } from "#mui/material";
import clsx from "clsx";
import theme from "../../theme";
// styling
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles(() => ({
buildContainers: {
"&.MuiGrid-root": {
height: "calc(calc((100vmin - 64px)",
},
},
flowchartContainer: {
"&.MuiGrid-root": {
backgroundColor: theme.palette.secondary,
},
},
}));
const BuildSection: React.FC = () => {
const classes = useStyles();
return (
<Grid container>
<Grid item className={classes.buildContainers} xs={2.8}>
Tools
</Grid>
<Grid
item
className={clsx(classes.buildContainers, classes.flowchartContainer)}
xs={12 - 2.8}>
Flowchart
</Grid>
</Grid>
);
};
export default BuildSection;
I want to change the backgroundColor to a color from my theme, but I get [object object] in the console styling sheet and the background color is not changing. What am I doing wrong? if I use the spread operator, it works for other component.
my theme:
import { createTheme } from "#mui/material/styles";
import "#mui/material/styles";
import "#mui/material/styles/createPalette";
enum themePalette {
ARCBLACK = "#181824",
ARCGREY = "#f5f5f5",
}
enum typographyFonts {
H3 = 300,
}
// adding a field
declare module "#mui/material/styles" {
interface TypographyVariants {
buttonStyleHeader: React.CSSProperties;
buttonStyleHeaderHover: React.CSSProperties;
estimateBtn: React.CSSProperties;
}
// allow configuration using `createTheme`
interface TypographyVariantsOptions {
buttonStyleHeader?: React.CSSProperties;
buttonStyleHeaderHover?: React.CSSProperties;
}
}
// Update the Typography's variant prop options
declare module "#mui/material/Typography" {
interface TypographyPropsVariantOverrides {
buttonStyleHeader: true;
buttonStyleHeaderHover: true;
}
}
declare module "#mui/material/styles/createPalette" {
interface CommonColors {
// might need more colors here3
}
}
const theme = createTheme({
palette: {
primary: {
main: themePalette.ARCBLACK,
},
secondary: {
main: themePalette.ARCGREY,
},
},
typography: {
h3: {
fontWeight: typographyFonts.H3,
},
buttonStyleHeader: {
backgroundColor: themePalette.ARCGREY,
textTransform: "capitalize",
fontSize: 19,
},
buttonStyleHeaderHover: {
backgroundColor: themePalette.ARCBLACK,
color: "white",
},
},
});
export default theme;
I know that for MUI v17+ the makeStyles have been depricated, but I don't know why the theme won't take this theme property.