Question

如果这些问题变得愚蠢，我深表歉意。我正试图跳入React＆Material-UI，但没有指导者向我提问或指导我。使用文档和教程等时，我会在黑暗中进行拍摄。我有很多问题。（实际上，有一个更好的地方问这些快速的一次性问题？也许是一个初学者聊天论坛？一个Slack组？不确定Stack是否是最合适的地方。）

我正在为客户建立表格。问题之一是四象限图表，用户可以在其中选择一个组合了四个不同向量的选项。很难解释，我不确定这种图表的技术术语是什么，所以我画了一张图以明确我要实现的目标：

我开始在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>



  );
}

我仍在学习Material-UI的网格的工作方式。我来自传统的JS / CSS / HTML原始背景，过去常常使用表格来布置像这样的小部件。用我的代码以上我正在尝试使用构建表格布局 Material-UI中的响应式网格系统。这是愚蠢的吗？还是我在正确的轨道上？网格是否用于这样的小组件？或者是是用于菜单和页面容器等较大的布局元素？
我正在尝试将卡用于四个象限，但是我将如何使用将它们组装到我的更大网格中？我是否需要嵌套另一个网格在更大的网格内？还是我应该使用某种网格 rowSpan或colSpan？网格甚至可以做到吗？
我当时正在考虑使用react单选盒并设置其样式 divs，因为它可以处理点击/选择功能，但是我决定使用“卡片”，仅使用javascript使它们像单击单选框。
我不完全了解在这里如何使用useStyles挂钩。我知道这是要覆盖Material-UI组件样式，但是我应该用它做任何事情？例如我正在使用标签图表标签，因为在语义上它们似乎是图表标题，但要为其设置样式，我需要将其添加到useStyles中吗函数，然后将className = {classes.h2}添加到我所有的H2中？似乎必须有一种更好的方式来设置这些元素的样式在我的图表组件中全局。我应该只使用CSS吗模板附加到我的组件上？像：进口 './Chart.css';？
我在该项目中的每个其他组件也都使用“ useStyles”，但是我注意到其中有些有效，有些则无效。例如我试过将对话框的大小调整为80％的宽度，但是当我尝试应用它时使用className = {classes.dialogue}进入对话框将不适用。我最终使用maxWidth = {'md'}属性来获取它可以扩大，但这是最好的方法吗？

s

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

        maxWidth = {'md'}
        >

让我知道您的想法。关于解决这些问题的任何技巧或建议，将不胜感激。

谢谢！

Answer 1

您需要支持Internet Explorer吗？如果没有，最简单的方法是使用css grid。

这里是一个例子：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";

import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles({
  paper: {
    display: "grid",
    gridTemplateColumns: "3rem 250px 250px 3rem",
    gridTemplateRows: "3rem 250px 250px 3rem",
    gridGap: "1rem",
    justifyItems: "center",
    alignItems: "center",
    justifyContent: "center"
  },
  top: {
    gridRow: "1 / 2",
    gridColumn: "1 / 5"
  },
  bottom: {
    gridRow: "4 / 5",
    gridColumn: "1 / 5"
  },
  left: {
    gridRow: "2 / 4",
    gridColumn: "1 / 2"
  },
  right: {
    gridRow: "2 / 4",
    gridColumn: "4 / 5"
  },
  card: {
    width: "100%",
    height: "100%"
  }
});

function MyCard({ title }) {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography>{title}</Typography>
      </CardContent>
    </Card>
  );
}

function Quadrants() {
  return (
    <React.Fragment>
      <MyCard title="Slow but expensive" />
      <MyCard title="Fast but expensive" />
      <MyCard title="Slow but Cheap" />
      <MyCard title="Slow but Fast" />
    </React.Fragment>
  );
}

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

  return (
    <Paper className={classes.paper}>
      <Typography className={classes.top}>Expensive</Typography>
      <Typography className={classes.bottom}>Cheap</Typography>
      <Typography className={classes.left}>Slow</Typography>
      <Typography className={classes.right}>Fast</Typography>
      <Quadrants />
    </Paper>
  );
}

export default FourQuadrants;

实时示例：

初学者的困惑：使用Material UI和React

1 个答案: