TestCaseSx.jsx

import {
  Box,
  Paper,
  Container,
} from '@mui/material'
import sx from '@mui/system/styleFunctionSx'

function Row() {
  return (
    <div>
      <Example />
      <Example />
      <Example />
      <Example />
      <Example />
    </div>
  )
}
function Example() {
  return (
    <Box
      component='span'
      sx={{
        color: 'error.dark',
        display: 'inline',
        fontWeight: 'bold',
        mx: 0.5,
        py: 0.5,
        fontSize: 14,
        width: [100, 200, 300],
        height: { xs: 100, sm: 200, md: 300, lg: 400, xl: 500, },

        '& > span': {
          marginX: 1,
          color: 'yellow',
        },
      }}
    >
      Example <span>component</span>
    </Box>
  )
}

export default function Component() {
  return (
    <Paper>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
      <Container> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> <Row /> </Container>
    </Paper>
  );
}