In the following you will see that my makeStyles style is not being picked up properly. I'm trying to figure out why. I've reduced the code to not much more than the App component, and a simple Experiment component rendered from within the App.
One particular point of interest, when I refresh the page, I see the correct style flashed on the screen momentarily before it is replace with the incorrect style.
I am using MUI 5.6 and I think I have followed the guides for styling. I have an App:
const theme = createTheme({
status: {
danger: "#ff0000",
},
});
const App = (props) => {
let app;
app = <>
{typeof theme != "undefined" && (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline />
<Experiment />
</ThemeProvider>
</StyledEngineProvider>
)}
</>
return (
<div>
{app}
</div>
);
};
The "Experiment" code rendered within the App:
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import makeStyles from '@mui/styles/makeStyles';
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
const useStyles = makeStyles((theme) => ({
paper: {
width: "100%",
marginBottom: theme.spacing(2),
},
root: {
backgroundColor: theme.palette.background.default,
},
pageTitle: {
backgroundColor: theme.palette.secondary.main,
borderColor: theme.palette.text.primary,
borderWidth: (props) => props.title.borderWidth,
borderStyle: (props) => props.title.borderStyle,
padding: (props) => props.title.padding,
textAlign: (props) => props.title.textAlign,
verticalAlign: (props) => props.title.verticalAlign,
},
pageControl: {
backgroundColor: theme.palette.secondary.light,
borderColor: theme.palette.text.primary,
borderWidth: (props) => props.control.borderWidth,
borderStyle: (props) => props.control.borderStyle,
height: (props) =>
props.control.height === undefined ? "auto" : props.control.height,
textAlign: (props) => props.control.textAlign,
overflow: (props) =>
props.control.overflow === undefined ? "auto" : props.control.overflow,
padding: (props) => props.control.padding,
verticalAlign: (props) => props.control.verticalAlign,
},
pageContent: {
width: "100%",
backgroundColor: theme.palette.secondary.dark,
borderColor: theme.palette.text.primary,
borderWidth: (props) => props.content.borderWidth,
borderStyle: (props) => props.content.borderStyle,
height: (props) =>
props.content.height === undefined ? "auto" : props.content.height,
overflow: (props) =>
props.content.overflow === undefined ? "auto" : props.content.overflow,
padding: (props) => props.content.padding,
textAlign: (props) => props.content.textAlign,
verticalAlign: (props) => props.content.verticalAlign,
},
}));
export default function Experiment() {
const page_configuration = useSelector((state) => state.configuration.page);
const theme = useTheme();
let contentStyle;
contentStyle = { ...page_configuration.content };
let titleStyle;
titleStyle = { ...page_configuration.title };
let controlStyle;
controlStyle = { ...page_configuration.control };
let style = {
...page_configuration,
content: contentStyle,
title: titleStyle,
control: controlStyle,
};
const classes = useStyles({ ...style });
return (
<Grid container className={classes.root}>
<Grid xs={12} item className={classes.pageTitle} >
<Typography>{"title"} </Typography>
</Grid>
<Grid
xs={12}
item
className={classes.pageControl}
>
{"control"}
</Grid>
<Grid
xs={12}
item
className={classes.pageContent}
>
{"content"}
</Grid>
</Grid>
);
}
A simpler Experiment component that also shows the problem:
return (
<Box height="100vh" display="flex" flexDirection="column">
<Box className={classes.pageTitle} >{"Expriment"}</Box>
<Box className={classes.pageControl} >{"Control"}</Box>
<Box className={classes.pageContent} flex={1} overflow="auto">{"Content"}</Box>
</Box>
);
The rendered screen:
If I save the App.js or Experiment.js file then the rendered screen picks up the styling that it should pick up:
If I examine the sytling and peek at the "title" portion of this page, before Saving App.js I see the following:
After I save App.js I see the proper makeStyles.
On first render there are 2 makeStyles style elements in header.
After the save I see additional makeStyle styles in header.
My dependencies:
"dependencies": {
"@date-io/date-fns": "^2.14.0",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.0",
"@mui/material": "^5.6.0",
"@mui/styles": "^5.6.0",
"@mui/x-date-pickers": "^5.0.0-alpha.7",
"@react-keycloak/web": "^3.4.0",
"@reduxjs/toolkit": "^1.5.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"axios": "^0.21.1",
"capture-video-frame": "^1.0.0",
"clsx": "^1.1.1",
"date-fns": "^2.23.0",
"hls.js": "^1.0.0",
"keycloak-js": "^18.0.0",
"leaflet": "^1.7.1",
"leaflet.markercluster": "^1.5.1",
"lodash": "^4.17.21",
"material-table": "^1.69.3",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"query-string": "^7.1.1",
"querystring": "^0.2.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-draggable": "^4.4.3",
"react-json-view": "^1.21.3",
"react-leaflet": "^3.2.1",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-player": "^2.9.0",
"react-redux": "^7.2.2",
"react-resize-detector": "^6.7.6",
"react-rnd": "^10.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"screenfull": "^5.1.0",
"socket.io-client": "^4.1.3",
"status-indicator": "^1.0.9",
"styled-components": "^5.2.1",
"superagent": "^6.1.0",
"use-deep-compare-effect": "^1.6.1",
"use-resize-observer": "^7.0.0",
"uuid": "^8.3.2",
"video.js": "^7.11.8",
"web-vitals": "^1.1.0"
},
