如何设置 Material UI 表头的样式？

Question

如何设置 Materials 的 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>

我想给表头添加样式

原文由 Eylon Shmilovich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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>

原文由 Raj Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议