如何go 除桌子上的阴影?try 查找API,但找不到正确的属性.以图书馆为例,它们都有一个影子.我不知道怎么才能go 掉它.

shadow below

https://codesandbox.io/s/fchdj1?file=/demo.tsx

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';

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),
];

export default function DenseTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(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>
  );
}

推荐答案

问题不在于桌子组件,而在于纸张,它有一个默认的阴影. 您正在将TableContainer与纸张一起使用,只需删除组件={Paper},它将默认设置为div.

Table Screenshot

Reactjs相关问答推荐

值在返回页面时不更新,即使我已经更新了它们

Reaction Axios多部分/表单-数据数组不工作

for each 子级加载父路由加载器

REACTION-Easy-SORT返回.map错误

根据处于react 状态的数组的名称键,将新对象添加到嵌套的对象数组中

为什么React UseEffect挂钩在页面重新加载时运行

useEffect不重新渲染

ctx.strokeStyle 在 canvas html 5 中不起作用

Chart.js如何go 除边框

在 golang 服务器中刷新或直接 url 路径时响应 404

我可以同时使用 Gatsby 和 NEXT.JS 吗?

如何在next.js 13中仅在主页导航栏上隐藏组件?

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

Formik onChange() 字段挂钩覆盖显示值和 Select 机制

使用 axios 响应路由 Dom 操作

vdom 最终更新了 dom(在比较之后)任何 dom 更改实际上应该触发整个树的重绘和回流,那么 vdom 有什么用?

React 中的 Slide API Mui 在开始而不是结束时触发侦听器

仅在重新渲染后设置状态

Material UI 安装和 React v. 18.2 出现问题

React Redux 在渲染组件之前等待获取状态