在MUI中设计非MUI元素的最佳方式？

Question

我在反应上是新的，总体上是一个新的发展；

我知道有许多方法可以让元素自己做出反应：

导入CSS、本地作用域CSS模块、通过Styled

• Components或like导入

• CSS -in-JS、

• 实用程序--首先使用诸如“编译”和"Linaria“、

H 113内联styling

• style对象变量H 216f 217等库的
• 导入CSS。

和两个当前用于样式MUI元素的API：

and

• SX

风格的

当涉及到定制MUI组件时，很明显，最好使用这两种组件之一；而且似乎使用MUI并不限制所有非MUI方式的使用。

因此，我想我是在问“最佳实践”，或者至少是“一个好的实践”，即尽量减少使用的样式技术(这样代码就不会变得臃肿)。

这反过来又提出了在文档中显然未得到回答的问题：

• ：MUI的样式化API和“样式化的组件”(通过我们正在谈论的情感在JS中的CSS)有什么区别？
• 在任何React的样式技术和MUI API之间绝对没有冲突吗？
• 是否存在与MUI样式API冲突的样式技术?如果非MUI元素不应该使用MUI API进行样式化，那么是否认为用您最喜欢的方式进行样式设计，但坚持这个最小值呢？

H 133任何最好的方式，是吗？有不能单独使用的情况吗?

示例:我需要处理一个非MUI组件:简单地说，我试图对一个SVG进行居中，这个SVG对屏幕来说可能太宽，也可能太薄，这将动态变化。我所需要的是它要么是100%的高度，如果它是高的，或者100%的宽度，如果它是宽的；这样的方式，使滚动条永远不会出现。

Answer 1

就像reddit回答说的:在React和MUI的造型方式之间没有冲突。你只需要确保你的风格的特殊性顺序是你想要的样子。在大型代码库中，坚持一种样式总是很好的，即使使用MUI也是如此。很可能您需要一些非MUI组件的样式。您可以在js或SASS或更少的地方使用MUI的样式()或css。没有一个完美的答案-可读性、可维护性和性能是您的主要考虑因素。因此，由于MUI的样式()应该适用于所有非MUI组件/元素，所以我将使用它。