React中Material-UI Table组件行高调整：设置height无效怎么办？

嘿，我来帮你搞定这个困扰！直接在style属性里设置height:10px没效果，是因为Material-UI的Table组件自带了默认的内边距和最小高度样式，优先级比你写的inline style高。你可以从这几个方向入手调整：

• 调整TableCell的内边距（核心）
  Table行高很大一部分来自TableCell的默认padding（默认是16px左右），所以先把这个改小。你可以直接给TableCell加sx属性来覆盖：

  <TableCell sx={{ padding: '2px 8px', height: '10px', lineHeight: '1' }}>
    你的单元格内容
  </TableCell>
  

  这里的lineHeight: '1'是为了避免单元格内的文本自带行高撑开高度，按需调整就行。

• 控制TableRow的最小高度
  有时候TableRow的默认min-height会限制行高的缩小，所以可以给TableRow也设置样式：

  <TableRow sx={{ height: '10px', minHeight: '10px' }}>
    {/* 这里放TableCell */}
  </TableRow>
  

• 全局统一修改（如果所有表格都需要）
  要是你整个项目的Table都要缩小行高，可以通过自定义Theme来全局配置，不用每个组件单独写：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiTableCell: {
        styleOverrides: {
          root: {
            padding: '2px 8px',
            height: '10px',
            lineHeight: '1',
          },
        },
      },
      MuiTableRow: {
        styleOverrides: {
          root: {
            minHeight: '10px',
          },
        },
      },
    },
  });
  
  // 然后把你的App包裹在ThemeProvider里
  function App() {
    return (
      <ThemeProvider theme={theme}>
        {/* 你的Table组件 */}
      </ThemeProvider>
    );
  }
  

这样调整之后，行高应该就能降到你想要的10px左右了，记得根据实际内容微调padding和lineHeight哦！

内容的提问来源于stack exchange，提问作者Anil