Reactjs 如何在react中降低单元格或行的高度？

我在react ui材料中使用了

表格

我想减少行高或内容高度或单元格高度。我的内容行以红色和白色交替显示。现在我想减少行高。我试图减少

填充

和边距，但不起作用 这是我的密码

---

高度在

元素上设置为

48px

，您可以将样式

行中的元素作为目标：

const style = {
 ...
 row: {
    border: "none",
    height: 28,
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
}

我将其设置为28，现在它对我有效。
高度在
元素上设置为
48px
，您可以将样式
行中的元素作为目标：

const style = {
 ...
 row: {
    border: "none",
    height: 28,
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
}

我将其设置为28，现在对我有效。
您可以在行下添加高度属性来更改高度，如下所示：

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: 0,
    fontSize: 8
  },
  table: {},
  row: {
    border: "none",
    height:"10px", **(just add this line, value can be anything, can also be in percentage)**
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
  body: {
    fontSize: 10,
    border: "none"
  }
});

您可以在行下添加高度属性来更改高度，如下所示：

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: 0,
    fontSize: 8
  },
  table: {},
  row: {
    border: "none",
    height:"10px", **(just add this line, value can be anything, can also be in percentage)**
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
  body: {
    fontSize: 10,
    border: "none"
  }
});