使特定样式仅适用于表体中的 TableCell答案

【问题标题】：Making specific style only apply to TableCell in Table body使特定样式仅适用于表体中的 TableCell
【发布时间】：2021-04-22 21:05:27
【问题描述】：

我正在尝试使用材质 UI 制作一个特定的表格。

基本上，除了表头和表体之间的行之外，表本身没有分隔行的行。根据我的发现，我尝试通过主题中的覆盖从表格单元格中删除底部边框，但我不知道如何将它们仅应用回 TableHead 中的特定 TableCells。这是我的主题中的覆盖：

overrides: {
    MuiTableCell: {
      root: {
        borderBottom: 'none'
      }
    },

我可以尝试的另一种方法是通过每个 TableCell 中的 Style 参数应用样式。什么是最有效的方法？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以通过 useStyles 覆盖 MUI 主题。见documentation

在你的情况下，让我们说

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { TableCell } from '@material-ui/core';

const useStyles = makeStyles({
  specificCell: {
    borderBottom: 'none';
  },
});



export default function Sample() {
  const classes = useStyles();
  return (
      ...
      ...
      <TableCell className={classes.specificCell}> </TableCell>

  );
}

【讨论】：