2

I faced with a problem with usage of Grid component from MUI V5. The problem that if write code in sandbox - it's works. I find out that i have to give sx={{'& .MuiGrid-root': { flexGrow: '1' } to my Grid container. But still my items property of xs doesn't works. Any idea what i missed?

   <Paper sx={{ padding: 5, height: '100%' }} >
        <Grid container spacing={4} sx={{border:'1px solid red','& .MuiGrid-root':{flexGrow: '1'},}}>
            <Grid item item xs={12} sm={12} md={12} lg={6} xl={4} sx={{border:'1px solid blue',}}> grid 1</Grid>
            <Grid item xs={2} sx={{border:'1px solid blue',}}> grid 2</Grid>
            <Grid item xs={6} sx={{border:'1px solid blue',}}> grid 3</Grid>
        </Grid>
    </Paper>

And the result just disappointment me result

Version if MUI : "@mui/material": "^5.8.2",

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Leon
  • 111
  • 1
  • 2
  • 5
  • 1
    As i searching deeper i found line on MUI : " It uses CSS's Flexible Box module for high flexibility". So maybe problem can be here. I use webpack 5. use { test: /\.scss|\.css$/,use: ['style-loader', 'css-loader', "postcss-loader"], }, in my webpackConfig. Maybe need to fix something here to implement this module. ho idea – Leon Jun 08 '22 at 09:57

0 Answers0