Путаница новичка: сетка выбора из четырех квадрантов во всплывающей форме с использованием пользовательского интерфейса материалов и React

Прошу прощения, если эти вопросы покажутся глупыми. Я пытаюсь перейти к React & Material-UI, и у меня нет наставника, которому можно задать вопросы или направить меня. Своего рода съемка в темноте, когда я иду, используя документацию и учебники и т. д. У меня много вопросов.. (на самом деле, есть ли лучшее место, чтобы задать такие быстрые одноразовые вопросы? Может быть, чат-форум для начинающих? Группа Slack? Не уверен, что Stack - лучшее место для этого..)

Я строю форму для клиента. Один из вопросов представляет собой четырехквадрантную диаграмму, где пользователь выбирает вариант, который объединяет 4 разных вектора. Это трудно объяснить, и я не уверен, что такое технический термин для такого типа диаграмм, поэтому я нарисовал диаграмму, чтобы было понятно, чего я пытаюсь достичь:

Я начал создавать компонент в React для обработки этой диаграммы выбора, но я уже немного потерялся. Вот что у меня есть до сих пор...

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  h2: { //<-- is there a better way to do this? Or do I need to target each h2 with a className classes.h2 ?
    color: "#f00",    
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  card: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
}));

export default function ProjectMap() {
  const classes = useStyles();

  function Slow_Expensive() {
    return (
      <Card className = {classes.card}>
      <CardActionArea>
        <CardContent>
          <Typography variant = "body2" color = "textSecondary" component = "p">
            Selection box slow but expensive.
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
    );
  }


  function TopRow() {
    return (
      <React.Fragment>
        <Grid item xs = {4}></Grid>
        <Grid item xs = {4}>
          <h2>Expensive</h2>
        </Grid>
        <Grid item xs = {4}></Grid>
      </React.Fragment>
    );
  }

  function MidRow() {
    return (
      <React.Fragment>
        <Grid item xs = {4}>
          <h2 className = {classes.h2}>Slow</h2> {/*Do I need to set a className on all of my h2's or is there a better way to target all of them within this component. */}
        </Grid>
        <Grid item xs = {4}>
          <h2>The Four Quadrants go here.. maybe cards assembled into maybe another grid?? a table??</h2>
        </Grid>
        <Grid item xs = {4}>
          <h2>Fast</h2>
        </Grid>
      </React.Fragment>
    );
  }

  function BotRow() {
    return (
      <React.Fragment>
        <Grid item xs = {4}></Grid>
        <Grid item xs = {4}>
           Cheap
        </Grid>
        <Grid item xs = {4}></Grid>
      </React.Fragment>
    );
  }

  return (
    <div className = {classes.root}>
    <h2>Choose one of hte options:</h2>
      <Grid container spacing = {1}> {/*is grid the best way to layout this component? Should I use a table instead?*/}
        <Grid container justify = "center" item  xs = {12} spacing = {2}>{/* Justify is not working.. I don't know why?*/}
          <TopRow />
        </Grid>
        <Grid container justify = "center" item  xs = {12} spacing = {2}>
          <MidRow />
        </Grid>
        <Grid container justify = "center"  item xs = {12} spacing = {2}>
          <BotRow />
        </Grid>
      </Grid>
    </div>



  );
}

1. Я все еще изучаю, как работает Grid в Material-UI. я родом из традиционный ванильный фон JS/CSS/HTML, и когда-то мы раньше использовал таблицы для размещения таких маленьких виджетов. В моем коде выше я пытаюсь создать макет таблицы, используя отзывчивая система сетки в Material-UI. Это глупо? Или я на правильном пути? Используется ли сетка для таких маленьких компонентов? Или это предназначены для более крупных элементов макета, таких как меню и контейнеры страниц?
2. Я пытаюсь использовать карты для четырех квадрантов, но как мне собрать их в мою большую сетку? Нужно ли вкладывать еще одну сетку внутри большей сетки? Или я должен использовать какую-то сетку rowSpan или colSpan? Сетки вообще делают это?
3. Я думал об использовании реагирующих радиоблоков и стилизации их как div, так как это будет обрабатывать функциональность щелчка/выбора, но я остановились на использовании «Карточек» и просто использовали javascript, чтобы они понравились радиобоксы по клику.
4. Я не совсем понимаю, как здесь используется хук useStyles. Я знаю он предназначен для переопределения стилей компонентов Material-UI, но я предполагается использовать его для всего? Например, я использую теги для меток диаграммы, поскольку семантически они кажутся диаграммой заголовки, но чтобы стилизовать их, мне нужно добавить их в мой useStyles функцию, а затем добавить className = {classes.h2} ко ВСЕМ моим H2? Кажется, должен быть лучший способ стилизовать эти элементы глобально в моем компоненте диаграммы. Должен ли я просто использовать CSS шаблон вместо этого прикреплен к моему компоненту? например: импорт './Диаграмма.css';?
5. Каждый из моих других компонентов в этом проекте также использует «useStyles», но Я заметил, что некоторые из них работают, некоторые нет. Например, я пытался изменить размер диалогового окна до ширины 80%, но когда я попытался применить его в мое диалоговое окно, используя className = {classes.dialogue}, стили не будет применяться. В итоге я использовал свойство maxWidth = {'md'}, чтобы получить растянуться шире, но лучший ли это способ сделать это?

с

<Dialog className = {classes.root} 
        open = {this.state.dialogOpen} 
        onClose = {this.onDialogClose}

        maxWidth = {'md'}
        >

Дайте мне знать ваши мысли ... любые советы или предложения о том, как решить эти проблемы, будут очень признательны.

Спасибо!