CODEWITHSUNDEEP
reactjsmaterial-ui
user944513
user944513

Reputation: 12729

how to reduce the height of cell or row in react?

I am using table in react ui material

https://material-ui.com/demos/tables/ I want to reduce the row height or content height or cell height.My content rows are displayed in alternate color red and white.Now I want to reduce the height of row.I tried to reduce padding and margin, but it not work here is my code 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"
  }
});

Upvotes: 1

Views: 5163

Answers (2)

Awab Ijaz
Awab Ijaz

Reputation: 99

You can add the height attribute under row to change the height, like this:

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

Upvotes: 1

MattYao
MattYao

Reputation: 2555

The height was set as 48px on the <tr> element, you can target the elements in your style row:

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

I set it as 28 and it works for me now.

Upvotes: 1

Related Questions