Using theme.palette.primary.main works, but when I try to use MUI with declared new props in the Interface inside the theme.ts file (recommended by the MUI docs) I get the error from the posted question. I dont know what else to do besides everything I tried (import Interface, MUI v4 syntax, etc). This is my code:
import {styled} from "@mui/material/styles";
import {Box, Container, Grid, NativeSelect} from "@mui/material";
//import CustomLink from "../custom-link/custom-link.component";
export const Background = styled(Box)(({ theme }) => ({
position: "fixed",
zIndex: "10",
height: theme.navHeight,
width: "100%",
backgroundColor: theme.palette.primary.main,
boxShadow: "0 7px 4px -2px rgba(0, 0, 0, 0.1)",
}));
My theme component:
import React from "react";
import {ThemeProvider} from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import theme from ".";
interface ThemeProps {
children: JSX.Element | JSX.Element[];
}
function Theme({children}: ThemeProps): JSX.Element {
const isMd = useMediaQuery(theme.breakpoints.up("md"), {
defaultMatches: true,
});
let navHeight = theme.navHeightDesktop;
let sectionPadding = theme.sectionPadding;
if (isMd) {
sectionPadding = "padding-bottom: 5rem;";
} else {
navHeight = theme.navHeightMobile;
}
return (
<ThemeProvider theme={{...theme, navHeight, sectionPadding}}>
{children}
</ThemeProvider>
);
}
export default Theme;
My theme.ts file:
import {createTheme} from "@mui/material/styles";
declare module "@mui/material/styles" {
interface Theme {
navHeightDesktop: string;
navHeightMobile: string;
sectionPadding: string;
fonts: object;
layout: object;
tertiary?: {
main: React.CSSProperties["color"];
};
}
interface ThemeOptions {
navHeightDesktop: string;
navHeightMobile: string;
sectionPadding: string;
fonts: object;
layout: object;
tertiary?: {
main: React.CSSProperties["color"];
};
}
}
const theme = createTheme({
navHeightDesktop: "80px",
navHeightMobile: "50px",
sectionPadding: "padding-bottom: 2.5em;",
fonts: {
primary: "Roboto, sans-serif",
secondary: "Roboto, sans-serif",
},
layout: {
contentWidth: 1236,
},
palette: {
primary: {
// contrastText: "rgba(0, 0, 0, 0.87)",
main: "#000",
},
secondary: {
// contrastText: "rgba(0, 0, 0, 0.87)",
main: "#fff",
light: "#FAFAFA",
},
text: {
primary: "#fff",
secondary: "#fff",
disabled: "#10355A",
},
},
typography: {
fontFamily: `"Roboto", "Open Sans", "Arial", sans-serif`,
},
shadows: [
"none",
"0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
"0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
"0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
"0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
],
transitions: {
easing: {
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
},
duration: {
shortest: 150,
shorter: 200,
short: 250,
standard: 300,
complex: 375,
enteringScreen: 225,
leavingScreen: 195,
},
},
});
export default theme;
It is because navHeight is not define in the Theme interface, use the following code and it should works
declare module "@mui/material/styles" {
interface Theme {
navHeight: string;
navHeightDesktop: string;
navHeightMobile: string;
sectionPadding: string;
fonts: object;
layout: object;
tertiary?: {
main: React.CSSProperties["color"];
};
}
}