如何在 Material ui TablestickyHeader 的表头上应用 css？答案

【问题标题】：How to apply css on table header of Material ui Table stickyHeader?如何在 Material ui TablestickyHeader 的表头上应用 css？
【发布时间】：2021-02-03 16:46:14
【问题描述】：

我正在使用带有 stickyHeader 属性的 Material UI 表，因为我希望我的表头得到修复。但是其他 css 并没有应用在 header 部分。

const useStyles = makeStyles((theme) => ({
    tableHead: {
    borderBottomStyle: "solid",
    borderBottomColor: "blue",
  },
}))


const CustomTable = () => {
return(
<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>
)
}

当我删除“stickyHeader”道具时。我在标题底部得到蓝色边框，但在stickyHeader 的情况下没有。

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

更新了 MUI 5 的答案，因为我遇到了同样的问题 - 每当我为我的 <Table> 设置 stickyHeader 属性时，我的样式都会消失。

我在 TableHead 组件中定位了 MuiTableCell-root 类，它很好。

带有样式组件的示例：

export const StyledTableHead = styled(TableHead)`
  & .MuiTableCell-root {
    background-color: red;
  }
`;

如果不先在<TableContainer> 中为<Table> 设置maxHeight，则stickyHeader 属性似乎无法按预期运行。

带有样式组件的示例：

export const StyledTableContainer = styled(TableContainer)`
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  max-height: 500px;
`;

然后可以这样使用：

<StyledTableContainer>
  <Table stickyHeader>
    <StyledTableHead>
      <TableRow>
        [your table header cells here]
      </TableRow>
    </StyledTableHead>
  </Table>
</StyledTableContainer>

【讨论】：

【解决方案2】：

通过添加 stickyHeader 属性，添加了一个设置 border-collapse:separate 的类。需要将其删除才能使标题边框可见。
从Table 定位stickyHeader Mui 类。

<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader classes={{stickyHeader:classes.stickyHeader}} aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>

const useStyles = makeStyles((theme) => ({
    tableHead: {
        borderBottomStyle: "solid",
        borderBottomColor: "blue"
    },
    stickyHeader:{
        borderCollapse:'collapse'
    }
}));

更新

要修复边框，有一个解决方法是在TableHead 的TableCell 中添加一个borderBottom。

<Table stickyHeader aria-label="simple table">
    <TableHead>
        <TableRow>
            <TableCell
                style={{
                    borderBottom: "5px solid blue"
                }}
            >
                Hii
            </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {//Tablebody items}
    </TableBody>
</Table>

工作演示：

【讨论】：

是的，现在我可以看到蓝色边框，但边框也在滚动。
如何将蓝色边框与标题粘贴在一起？
不！边框还在滚动
你检查过codesandbox演示吗？？？在这种情况下，不需要为边框折叠或任何东西添加任何样式..
哦！我没注意到！是的，我刚看到。它在 CodeSandBox 中运行良好。明天我会在我的代码中检查它。非常感谢你的帮助。我现在将其标记为答案！一旦我在我的代码中检查它，我会告诉你我是否面临和困难。