Calc() in Material UI

Programming
, ,
1

Solution

To create two divs side-by-side on a page using the latest versions of React and Material UI, the left div should have a fixed width of 200px and the right div should cover the rest of the page. In CSS, one would use calc(100% - 200px) to dynamically compute the width of the right div, but this does not seem to be working with Material UI.

Inline styling with style={{width='calc(100%-200)'}} compiles, but does not render properly, and using makeStyles() also yields no results.

We deeply appreciate the community’s help in this matter.

2

To create two divs side-by-side on a page using the latest versions of React and Material UI, you can use the Grid component provided by Material UI. Here’s an example code snippet:

import { Grid } from '@material-ui/core';

function MyComponent() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={4}>
        {/* Content for the left div */}
      </Grid>
      <Grid item xs={12} sm={8}>
        {/* Content for the right div */}
      </Grid>
    </Grid>
  );
}

In this example, the xs prop specifies the number of columns the grid item should take up on extra small screens (mobile devices), and the sm prop specifies the number of columns the grid item should take up on small screens and up. By setting xs={12} sm={4} on the left grid item and xs={12} sm={8} on the right grid item, we ensure that the left div takes up 4 columns on small screens and up, while the right div takes up the remaining 8 columns. The spacing prop adds margin between the grid items.