@mui/system --Grid-columns css var is undefined

Question

I've been ripping my hair for a couple of days trying to solve this now. We have a react application where we're using styled-components and we wanted to add @mui/system to take advantage of their nice Grid component (Grid v2 to be precise). We have installed @mui/system and set it up according to the documentation to use styled-components as the styled-engine (using styled-engine-sc). So far so good. But when we run the app and try using the Grid component, it doesn't work as expected and all grid elements span across the entire viewport. Doing a quick inspect shows that the css var --Grid-columns is undefined (see image) and I can't find how to get those css vars to be injected in our app when using just @mui/system and styled-components as styled-engine.

Update: Further investigations show that using @mui/material package instead of just @mui/system does not help either, so the problem seems to be lying in using styled-components as the styled-engine.

But why that affects the css vars that should be injected by @mui baffles me.

Here's our setup:

package.json

"dependencies": {
    "@mui/system": "^5.11.8",
    "@mui/styled-engine-sc": "^5.11.0",
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
...
}

tsconfig.json

...
  "compilerOptions": {
    "declarationDir": "dist",
    "paths": {
      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
    }
  }
...

webpack.config.js

...
  resolve: {
    alias: {
      '@material-ui/styled-engine': '@material-ui/styled-engine-sc',
    },
  },
...

And finally the component where we use the Grid.

...
import Grid from '@mui/system/Unstable_Grid';
import ThemeProvider from '@mui/system/ThemeProvider';
import { createTheme } from '@mui/system';

const Root () => {
  const { useSelectedFlightState } = store;
  const theme = createTheme();

  return (
   <ThemeProvider theme={theme}>
     <Grid container spacing={2} xs={12} sm={10} smOffset={1}>
       <Grid xs={12} sm={8}>
        ....
       </Grid>
       <Grid xs={12} sm={4}>
       ....
       </Grid>
     </Grid>
   </ThemeProvider>
  );
};

export default Root;

Answer 1

You can add columns prop for define --Grid-columns variable