如何使用样式调整 Material UI 头部的高度

huangapple
go评论62阅读模式
英文:

How to adjust height of material UI header with styles

问题

如何为MUI表格的表头设置样式，比如高度和宽度？

<TableHead >
<TableRow >
<TableCell hover>甜点 (100克份)</TableCell>
<TableCell align="right">卡路里</TableCell>
<TableCell align="right">脂肪&nbsp;(克)</TableCell>
<TableCell align="right">碳水化合物&nbsp;(克)</TableCell>
<TableCell align="right">蛋白质&nbsp;(克)</TableCell>
</TableRow>
</TableHead>


我尝试传递
`sx={{
height: '20px' 
}}`
但是高度仍然固定。
英文:

How can you style the header of a MUI table like height and width?

&lt;TableHead &gt;
  &lt;TableRow &gt;
    &lt;TableCell hover&gt;Dessert (100g serving)&lt;/TableCell&gt;
    &lt;TableCell align=&quot;right&quot;&gt;Calories&lt;/TableCell&gt;
    &lt;TableCell align=&quot;right&quot;&gt;Fat&amp;nbsp;(g)&lt;/TableCell&gt;
    &lt;TableCell align=&quot;right&quot;&gt;Carbs&amp;nbsp;(g)&lt;/TableCell&gt;
    &lt;TableCell align=&quot;right&quot;&gt;Protein&amp;nbsp;(g)&lt;/TableCell&gt;
  &lt;/TableRow&gt;
&lt;/TableHead&gt;

I tried passing
sx={{
height:&#39;20px&#39;
}}
but the height is fixed

答案1

得分: 1

你可以通过在TableHead组件上使用sx来实现这个效果：

<TableHead sx={{height: "150px"}}>
    <TableRow>
        <TableCell hover>Dessert (100g serving)</TableCell>
        <TableCell align="right">Calories</TableCell>
        <TableCell align="right">Fat (g)</TableCell>
        <TableCell align="right">Carbs (g)</TableCell>
        <TableCell align="right">Protein (g)</TableCell>
    </TableRow>
</TableHead>
英文:

You can achieve that by using sx on the TableHead component:

&lt;TableHead sx={{height:&quot;150px&quot;}}&gt;
        &lt;TableRow &gt;
            &lt;TableCell hover&gt;Dessert (100g serving)&lt;/TableCell&gt;
            &lt;TableCell align=&quot;right&quot;&gt;Calories&lt;/TableCell&gt;
            &lt;TableCell align=&quot;right&quot;&gt;Fat&amp;nbsp;(g)&lt;/TableCell&gt;
            &lt;TableCell align=&quot;right&quot;&gt;Carbs&amp;nbsp;(g)&lt;/TableCell&gt;
            &lt;TableCell align=&quot;right&quot;&gt;Protein&amp;nbsp;(g)&lt;/TableCell&gt;
        &lt;/TableRow&gt;
 &lt;/TableHead&gt;

答案2

得分: 0

要自定义TableHead的样式，您需要定位Table的**MuiTableCell-head**类。

需要注意的一点是，Mui TableHead的高度不是通过height属性设置的，而是通过**line-height**来设置的。请参考以下示例：

import { Table, TableHead, TableBody } from '@mui/material';

<Table sx={{ '& .MuiTableCell-head': { lineHeight: 20, color: 'red' } }}>

  <TableHead>
  </TableHead>

  <TableBody>
  </TableBody>

</Table>
英文:

To customize the styling of the TableHead you need to target the MuiTableCell-head class of the Table.

One important thing to notice, Mui TableHead height is not coming from the height property, It is coming from line-height. Please check the example below:

 import { Table, TableHead, TableBody } from &#39;@mui/material&#39;


 &lt;Table sx={{ &#39;&amp; .MuiTableCell-head&#39;:{ lineHeight: 20, color: &#39;red&#39; } }}&gt;

      &lt;TableHead&gt;
      &lt;/TableHead&gt;

      &lt;TableBody&gt;
      &lt;/TableBody&gt;

  &lt;/Table&gt;

huangapple
  • 本文由 发表于 2023年2月10日 05:11:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/75404448.html
  • javascript
  • material-ui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定