material-ui [Joy][Table]条纹、悬停等效果不遵循边框半径

cnjp1d6j  于 6个月前  发布在  其他
关注(0)|答案(1)|浏览(43)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

链接到实时示例:https://mui.com/joy-ui/react-table/#usage-with-sheet
步骤:

  1. 启用条纹、悬停或更改表格的主体颜色

当前行为 😯

当用于 Sheet (或其他元素)时,底部边框半径将为0,从而使父元素的半径失效。

预期行为 🤔

当表格位于 SheetCard 时,它应遵循相关字段的边框半径。

上下文 🔦

包含除基本设置之外的表格会使表格溢出其组件。

你的环境 🌎

  • 无响应*
pbwdgjma

pbwdgjma1#

感谢您的反馈。我决定不让边框半径跟随表格,因为它不是每个使用场景的100%。
例如:
向表格添加顶部和底部的内边距不需要在表格上设置边框半径。

我认为这种情况的一个合适解决方案(类似于List组件)是让实用样式内部与组件集成,供开发人员使用。

import { applyTableCellRadius } from '@mui/joy/Table';

<Table
  sx={{ '& tbody > tr:last-child > td:first-child': { …applyTableCellRadius(['bottom-left']) } }}
>…</Table>
  • 优化了捆绑包大小。你得到你需要的。
  • Joy提供了工具,你可以完全控制它们。

这可能是我将来想要引入的一个新功能(即micro styles)。

相关问题