在 MUI 中设置非 MUI 元素样式的最佳方式？
Best way to style non-MUI elements in MUI?
我是 React 新手，一般来说是新开发人员；
我知道在 React 中有很多方法可以给元素设置样式：
- 正在导入 CSS、
- 局部范围 CSS 个模块，
- CSS-in-JS 通过 Styled
- 成分或情感，
- 效用优先 CSS 像 Tailwind 一样静态
- 使用“Compiled”和“Linaria”等库提取CSS，
- 内联样式
- 样式对象变量
和两个当前 API 样式 MUI 元素：
- 样式化和
- SX
在自定义 MUI 组件时，显然最好使用这两者之一；使用 MUI 似乎也不会限制使用所有非 MUI 方式来设置样式。
所以我想我问的是“最佳实践”，或者至少是“一个好的实践”，可以最大限度地减少使用的样式技术（这样代码就不会变得臃肿）。
这反过来又提出了文档中没有明确回答的问题：
- MUI 的样式化 API 和“样式化组件”（CSS 在 JS 中通过我们正在谈论的情感）有什么区别？
- React 的任何样式技术和 MUI API 之间绝对没有冲突吗？
- 是否存在与 MUI 样式冲突的样式技术 API？
- 如果非 MUI 元素不应该使用 MUI APIs 设置样式，那么仅使用您最喜欢的方式设置样式但坚持这一最低限度是否被认为是最佳实践？
- 无论哪种方式最好，是否存在不能单独使用的情况？
示例：我需要处理一个非 MUI 组件：简而言之，我正在尝试将一个 SVG 居中，该 SVG 对于屏幕来说可能太宽或太薄，并且会动态变化。我所需要的只是如果它高则为 100% 高度，如果它宽则为 100% 宽度；这样滚动条永远不会出现。
正如 reddit 的回答所说：事实证明，React 和 MUI 的样式化方式之间没有冲突。你只需要确保你的风格的特殊顺序是你想要的。在大型代码库中，坚持一种样式总是好的，即使使用 MUI。您很可能需要为 non-MUI 组件设置一些样式。你可以使用 MUI 的 styled()，或者在 js 中使用 css 或者 SASS 或者 LESS。没有一个完美的答案——可读性、可维护性和性能是您的主要考虑因素。
因此，由于 MUI 的 styled() 应该适用于所有 non-MUI components/elements，我会接受它。
我是 React 新手，一般来说是新开发人员；
我知道在 React 中有很多方法可以给元素设置样式：
- 正在导入 CSS、
- 局部范围 CSS 个模块，
- CSS-in-JS 通过 Styled
- 成分或情感，
- 效用优先 CSS 像 Tailwind 一样静态
- 使用“Compiled”和“Linaria”等库提取CSS，
- 内联样式
- 样式对象变量
和两个当前 API 样式 MUI 元素：
- 样式化和
- SX
在自定义 MUI 组件时，显然最好使用这两者之一；使用 MUI 似乎也不会限制使用所有非 MUI 方式来设置样式。
所以我想我问的是“最佳实践”，或者至少是“一个好的实践”，可以最大限度地减少使用的样式技术（这样代码就不会变得臃肿）。
这反过来又提出了文档中没有明确回答的问题：
- MUI 的样式化 API 和“样式化组件”（CSS 在 JS 中通过我们正在谈论的情感）有什么区别？
- React 的任何样式技术和 MUI API 之间绝对没有冲突吗？
- 是否存在与 MUI 样式冲突的样式技术 API？
- 如果非 MUI 元素不应该使用 MUI APIs 设置样式，那么仅使用您最喜欢的方式设置样式但坚持这一最低限度是否被认为是最佳实践？
- 无论哪种方式最好，是否存在不能单独使用的情况？
示例：我需要处理一个非 MUI 组件：简而言之，我正在尝试将一个 SVG 居中，该 SVG 对于屏幕来说可能太宽或太薄，并且会动态变化。我所需要的只是如果它高则为 100% 高度，如果它宽则为 100% 宽度；这样滚动条永远不会出现。
正如 reddit 的回答所说：事实证明，React 和 MUI 的样式化方式之间没有冲突。你只需要确保你的风格的特殊顺序是你想要的。在大型代码库中，坚持一种样式总是好的，即使使用 MUI。您很可能需要为 non-MUI 组件设置一些样式。你可以使用 MUI 的 styled()，或者在 js 中使用 css 或者 SASS 或者 LESS。没有一个完美的答案——可读性、可维护性和性能是您的主要考虑因素。 因此，由于 MUI 的 styled() 应该适用于所有 non-MUI components/elements，我会接受它。