在MaterialUI中，如何将类应用于我的排版元素？

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  myClass: {
    // CSS样式
  },
});

function MyComponent() {
  const classes = useStyles();

  return (
    <div className={classes.myClass}>
      {/* 元素内容 */}
    </div>
  );
}

import React from 'react';

function MyComponent() {
  const myStyle = {
    // CSS样式
  };

  return (
    <div style={myStyle}>
      {/* 元素内容 */}
    </div>
  );
}

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

function MyComponent() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={6}>
        {/* 左侧元素 */}
      </Grid>
      <Grid item xs={6}>
        {/* 右侧元素 */}
      </Grid>
    </Grid>
  );
}