我应该只使用 MUI 组件还是将 html 标签与 mui 组件混合使用

Question

如果我在 MUI 组件中使用一些 html 标签可以吗？或者我应该在页面中只使用 MUI 组件，什么是性能的最佳选择 还有其他库在性能和编码简单性方面比 MUI 更好吗

Answer 1

✅ 您可以结合使用两者。

我遵循以下规则：如果我必须添加一些样式或需要一些特定于 MUI 的功能或道具，我会使用 MUI 组件。否则，我使用 HTML 标签。

这两种情况都有优点和缺点。你可以查看这个文档：什么时候使用MUI系统？ 是的，它会影响性能。检查下面的屏幕截图：

因此，我向您介绍我更喜欢 MUI 组件而不是 HTML 的情况，反之亦然：

1. 在 MUI 组件上使用 HTML 标签：

   您通常只想用

   div

   包裹您的子组件或标签。

   使用这个：

   <div> { child } </div>

   在此：

   <Box component="div"> { child } </Box>

2. 通过 HTML 标签使用 MUI 组件：

   通常，当您添加图像时，您需要对其进行一些样式设置。您可以使用 MUI

   sx

   属性来设计和调整

   img

   。

   使用这个：

   Box component="img" src="..." sx={{ ... }}/>

   在此：

   <img src="..." style={{ ... }}/>