如何为 MUI 表容器内的 div 制作一个固定位置？
Posted
技术标签:
【中文标题】如何为 MUI 表容器内的 div 制作一个固定位置？【英文标题】：How to make a sticky position for a div inside MUI table container? 【发布时间】：2022-01-23 20:54:05 【问题描述】：在Material UI Table中，我有一个应用了sticky property的表格，效果很好。在table之上，但是在 TableContainer 中，我有一个包裹在 Box 中的按钮，该按钮也应该与表头粘在一起。 我用 flex 尝试了这种方法，但对我不起作用。
.wrapper
display: flex;
flex - direction: column;
overflow: hidden;
.scrollable - child
overflow - y: auto;
还尝试将position: relative 应用于父母并将position: sticky 应用于孩子但没有成功。
任何帮助将不胜感激。
这是Sandbox link 和下面的代码
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Box, Button from "@mui/material";
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number
)
return name, calories, fat, carbs, protein ;
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
export default function BasicTable()
return (
<TableContainer
component=Paper
sx=
maxHeight: "400px",
minHeight: "400px",
position: "relative"
>
<Box sx= position: "sticky" > //this doesn't work
<Button>click</Button>
</Box>
<Table sx= minWidth: 650 aria-label="simple table" stickyHeader>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
rows.map((row) => (
<TableRow
key=row.name
sx= "&:last-child td, &:last-child th": border: 0
>
<TableCell component="th" scope="row">
row.name
</TableCell>
<TableCell align="right">row.calories</TableCell>
<TableCell align="right">row.fat</TableCell>
<TableCell align="right">row.carbs</TableCell>
<TableCell align="right">row.protein</TableCell>
</TableRow>
))
</TableBody>
</Table>
</TableContainer>
);
【问题讨论】：
【参考方案1】：仅给出位置是不够的：粘性。您需要添加如下协调信息。
position: sticky;
top: 40px;
left: 40px;
【讨论】：
感谢您的回答。你能更新沙盒吗？您的建议似乎对我不起作用。【参考方案2】：如果其他人遇到类似问题，我已经想出了如何解决这个问题。
我的做法是像MUI Docs 中所述那样执行Column grouping，换句话说，将我的按钮添加到Table 内的新TableRow。
请参阅下面的工作代码和更新的sandbox link
import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Box, Button from "@mui/material";
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number
)
return name, calories, fat, carbs, protein ;
const rows = [
createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
createData("Eclair", 262, 16.0, 24, 6.0),
createData("Cupcake", 305, 3.7, 67, 4.3),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9),
createData("Gingerbread", 356, 16.0, 49, 3.9)
];
export default function BasicTable()
return (
<TableContainer
component=Paper
sx=
maxHeight: "400px",
minHeight: "400px"
>
<Table sx= minWidth: 650 aria-label="simple table" stickyHeader>
<TableHead>
<TableRow>
<TableCell colSpan=7>
<Button>click</Button>
</TableCell>
</TableRow>
<TableRow>
<TableCell style= top: 57 >Dessert (100g serving)</TableCell>
<TableCell align="right" style= top: 57 >
Calories
</TableCell>
<TableCell align="right" style= top: 57 >
Fat (g)
</TableCell>
<TableCell align="right" style= top: 57 >
Carbs (g)
</TableCell>
<TableCell align="right" style= top: 57 >
Protein (g)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
rows.map((row) => (
<TableRow
key=row.name
sx= "&:last-child td, &:last-child th": border: 0
>
<TableCell component="th" scope="row">
row.name
</TableCell>
<TableCell align="right">row.calories</TableCell>
<TableCell align="right">row.fat</TableCell>
<TableCell align="right">row.carbs</TableCell>
<TableCell align="right">row.protein</TableCell>
</TableRow>
))
</TableBody>
</Table>
</TableContainer>
);
【讨论】：
以上是关于如何为 MUI 表容器内的 div 制作一个固定位置？的主要内容，如果未能解决你的问题，请参考以下文章