如果我在 MUI 组件中使用一些 html 标签可以吗?或者我应该在页面中只使用 MUI 组件,什么是性能的最佳选择 还有其他库在性能和编码简单性方面比 MUI 更好吗
✅ 您可以结合使用两者。
我遵循以下规则:如果我必须添加一些样式或需要一些特定于 MUI 的功能或道具,我会使用 MUI 组件。否则,我使用 HTML 标签。
这两种情况都有优点和缺点。你可以查看这个文档:什么时候使用MUI系统? 是的,它会影响性能。检查下面的屏幕截图:
因此,我向您介绍我更喜欢 MUI 组件而不是 HTML 的情况,反之亦然:
在 MUI 组件上使用 HTML 标签:
您通常只想用
div
包裹您的子组件或标签。
使用这个:
<div> { child } </div>
在此:
<Box component="div"> { child } </Box>
通过 HTML 标签使用 MUI 组件:
通常,当您添加图像时,您需要对其进行一些样式设置。您可以使用 MUI
sx
属性来设计和调整 img
。
使用这个:
Box component="img" src="..." sx={{ ... }}/>
在此:
<img src="..." style={{ ... }}/>