时间戳

首页 > 解决方案 > 如何在 Material ui TablestickyHeader 的表头上应用 css？

javascript - 如何在 Material ui TablestickyHeader 的表头上应用 css？

问题描述

我正在使用带有 stickyHeader 道具的 Material UI 表，因为我希望修复我的表头。但是其他css并没有应用于标题部分。

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 的情况下没有。

标签： javascriptcssreactjsmaterial-ui

解决方案

更新了 MUI 5 的答案，因为我遇到了同样的问题 - 任何时候我stickyHeader为我的造型设置道具<Table>都会消失。

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

带有样式组件的示例：

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

如果不首先为in设置 a ， instickyHeader道具将无法按预期运行。maxHeight<Table><TableContainer>

带有样式组件的示例：

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>

推荐阅读