react appbar width not sizing properly

Question

In my react project I am trying to adjust the appbar width. As of now it is pushed to far to the left as shown in picture below.

The custom class I am trying to use is not doing anything. No error messages, just not working.

Does anyone see what I am doing wrong?

import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";

const drawerWidth = 200; //240

const useStyles = makeStyles((theme) => {
 return {
page: {
  background: "#f1f1f1",
  width: "100%",
  padding: useTheme().spacing(3),
},
drawer: {
  width: drawerWidth,
},
drawerPaper: {
  width: drawerWidth,
},
root: {
  display: "flex",
},
active: {
  background: "#f4f4f4",
},
appbar: {
  width: `calc(100% - ${drawerWidth}px)`,
},
// toolbar: theme.mixins.toolbar,
};
 });

CoupFlu · Answer 1 · 2022-08-13T15:49:37.747

-2

Update: You can correct the problem by doing this instead:

    appbar: {
  width: 'calc(100% - '+drawerWidth+'px)'
},

I think something must have changed between versions of react that allowed his to work and ours not too.

I have the following configurations and it is now working fine "react": "^16.13.0", "react-dom": "^16.13.0".

I noticed the code is highlighted differently in my VS Code than in https://www.youtube.com/watch?v=0WbrOfmvjvU&list=PL4cUxeGkcC9gjxLvV4VEkZ6H6H4yWuS58&index=16

edited Aug 13 '22 at 15:49

answered Aug 13 '22 at 15:36

CoupFlu

311
4
20

This results in the same string as the one in the question, it's just using string interpolation, which is a Javascript construct, regardless of the version of React. – Nathan Aug 13 '22 at 15:56

react appbar width not sizing properly

1 Answers1