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

Posted 2023-02-22

【中文标题】使特定样式仅适用于表体中的 TableCell

【英文标题】：Making specific style only apply to TableCell in Table body

【发布时间】：2021-04-22 21:05:27

【问题描述】：

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

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

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

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

【参考方案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>

  );