如何设置 Material UI 表格标题的样式？

Question

如何设置材质 UI 表格标题的样式？

也许可以使用 useStyle 添加类。

<TableHead >
            <TableRow >
                <TableCell hover>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>

我想为表格标题添加样式

Answer 1

我个人使用“makeStyles”进行样式设置，但您也可以使用“withStyles”。

这是表格：

<TableHead >
    <TableRow className={classes.root}>
        <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>

这是样式：

const useStyles = makeStyles({

    root: {
        "& .MuiTableCell-head": {
            color: "white",
            backgroundColor: "blue"
        },
    }
});

这是输出：

Answer 2

您可以使用

withStyles

并创建具有您自己的样式的自定义元素，如下所示。您可以查看工作场景

const TableHead = withStyles(theme => ({
  root: {
    backgroundColor: 'orange'
  }
}))(MuiTableHead);

const TableHeaderCell = withStyles(theme => ({
  root: {
    color: 'white'
  }
}))(TableCell);

<TableHead>
  <TableRow>
    <TableHeaderCell>Dessert (100g serving)</TableHeaderCell>
    <TableHeaderCell align="right">Calories</TableHeaderCell>
    <TableHeaderCell align="right">Fat&nbsp;(g)</TableHeaderCell>
    <TableHeaderCell align="right">Carbs&nbsp;(g)</TableHeaderCell>
    <TableHeaderCell align="right">Protein&nbsp;(g)</TableHeaderCell>
  </TableRow>
</TableHead>

Answer 3

您可以使用

sx

中的

<TableRow>

道具来设置表格标题的样式并将颜色更改为您的颜色。

 sx={{
      "& th": {
        color: "rgba(96, 96, 96)",
        backgroundColor: "pink"
      }
    }}

这是我的 CodeSandbox 示例：https://codesandbox.io/embed/customizedtableheader-nl4bio?fontsize=14&hidenavigation=1&theme=dark

在

这里

查看更多关于sx的信息。

Answer 4

以下是如何通过调整主题来全局设置所有 TableHeaders 的样式：

import { createMuiTheme } from "@material-ui/core/styles";

export const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      head: {
        color: "grey",
      }
    }
  },
  palette: {
    primary: {
      ... 
    },
    secondary: {
     ...
    }
  },
});

注意：这是MUI v4格式，v5格式略有不同。有关详细信息，请查看 MUI v4 -> v5 迁移 指南。

Answer 5

在

<TableHead>

内添加样式，如下所示：

注意：

• backgroundColor

  ：这是标题背景的颜色

• color

  ：这是标题内字体的颜色

<TableHead style={{backgroundColor:'red', color: 'white',}}>

将其添加到代码中后，它看起来像这样：

<TableHead style={{backgroundColor:'red', color: 'white',}}>
            <TableRow className={classes.root}>
                <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>

Answer 6

使用``withStyles````

您应该使用material-ui提供的

withStyles

高阶组件来创建自定义样式并将其应用到组件。

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

// Define custom styles
const styles = theme => ({
  headerCell: {
    // Add your custom styles here
    backgroundColor: '#f0f0f0', // Example background color
    fontWeight: 'bold', // Example font weight
  },
});

// Define the TableHeader component
const CustomTableHead = ({ classes }) => {
  return (
    <TableHead>
      <TableRow>
        {/* Apply custom styles to TableCell components */}
        <TableCell className={classes.headerCell} hover>Dessert (100g serving)</TableCell>
        <TableCell className={classes.headerCell} align="right">Calories</TableCell>
        <TableCell className={classes.headerCell} align="right">Fat&nbsp;(g)</TableCell>
        <TableCell className={classes.headerCell} align="right">Carbs&nbsp;(g)</TableCell>
        <TableCell className={classes.headerCell} align="right">Protein&nbsp;(g)</TableCell>
      </TableRow>
    </TableHead>
  );
};

// Apply custom styles to the component using withStyles
export default withStyles(styles)(CustomTableHead);