使Material UI容器组件响应

import React from 'react';
import { Container, Grid, Typography } from '@mui/material';

function ResponsiveLayout() {
  return (
    <Container>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6} md={4}>
          <Typography variant="h4">Item 1</Typography>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Typography variant="h4">Item 2</Typography>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Typography variant="h4">Item 3</Typography>
        </Grid>
      </Grid>
    </Container>
  );
}

export default ResponsiveLayout;

import React from 'react';
import { useMediaQuery } from '@mui/material';

function ResponsiveComponent() {
  const isSmallScreen = useMediaQuery('(max-width:600px)');

  return (
    <div style={{ fontSize: isSmallScreen ? '1.5rem' : '2rem' }}>
      This text will be smaller on small screens.
    </div>
  );
}

export default ResponsiveComponent;