Как уменьшить высоту ячейки или строки в реакции?

Question

Я использую table в реагирующем пользовательском интерфейсе

https://material -ui.com / demos / tables / Я хочу уменьшить высоту строки или высоту содержимогоили высота ячейки . Мои строки содержимого отображаются чередующимися красными и белыми цветами. Теперь я хочу уменьшить высоту строки. Я попытался уменьшить padding и поле, но это не работает, вот мой код https://codesandbox.io/s/98k3r5l9k4

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: 0,
    fontSize: 8
  },
  table: {},
  row: {
    border: "none",
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
  body: {
    fontSize: 10,
    border: "none"
  }
});

Answer 1

Вы можете добавить атрибут height под строкой, чтобы изменить высоту, например:

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"
  }
});

Answer 2

Высота была установлена ​​как 48px в элементе <tr>, вы можете настроить таргетинг на элементы в своем стиле row:

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

Я установил его как 28, и теперь он работает для меня.