如何通过 MUI 5 SX 属性使用多个 CSS 类？答案

【问题标题】：How to use multiple CSS classes with MUI 5 SX prop?如何通过 MUI 5 SX 属性使用多个 CSS 类？
【发布时间】：2022-08-09 19:58:13
【问题描述】：

有谁知道如何将多个 CSS 类与 MUI 5 SX 道具一起使用？我创建了一个基类，我想将它与我的 Box 组件一起使用，但使用第二个类专门用于 Box 内的文本。应用基类，例如 sx={styles.baseBoxStyle} 有效，但 sx={styles.baseBoxStyle styles.customBoxFontStyle} 返回错误。下面提供了完整的代码 sn-p 和沙箱。非常感谢任何帮助！

沙盒：https://codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js

import * as React from \"react\";
import Box from \"@mui/material/Box\";

const styles = {
  baseBoxStyle: {
    backgroundColor: \"red\",
    borderRadius: \"20px 20px 20px 20px\",
    border: \"1px solid black\",
    maxWidth: \"150px\",
    margin: \"20px\",
    padding: \"10px\"
  },
  customBoxFontStyle: {
    color: \"yellow\",
    fontWeight: \"bold\"
  }
};

export default function Index() {
  return <Box sx={styles.baseBoxStyle styles.customBoxFontStyle}>This is a test</Box>;
}

沙盒链接：codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js
你好，如果我想在样式中使用主题并通过它，我该如何使用它？

标签： javascript reactjs material-ui

【解决方案1】：

我有一个类似的问题，并想出了这个解决方案。

  <Box sx={[styles.baseBoxStyle, styles.customBoxFontStyle]}>
    This is a test
  </Box>

https://codesandbox.io/s/sweet-blackwell-oqp9ph?file=/src/App.js:416-517

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

对于一个简单的解决方案，可以解构样式对象并组合成一个对象。

<Box sx={{...styles.baseBoxStyle,...styles.customBoxFontStyle}}>This is a test</Box>

【讨论】：

【解决方案3】：

您可以尝试使用classnames 作为其常用库，或者您可以将这些样式制作成字符串，然后传入sx sx={styles.baseBoxStyle+' '+styles.customBoxFontStyle}

【讨论】：

我刚刚尝试了关于 sx 道具的建议，但它不起作用，因为它们是对象。 codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js
哦，对不起，我不知道为什么我想，这些是类......但是你可以尝试将这两个对象结合起来：sx={{...styles.baseBoxStyle,...styles.customBoxFontStyle}}
对不起，Wraithy，这也不起作用。
我道歉。您的解决方案确实有效。在咨询了另一位提出相同建议的 React 开发人员后，我确认了这一点。不知道为什么最初测试它不起作用，但我怀疑我忽略了将它包裹在额外的大括号中。

【解决方案4】：

我认为您不能在课程中使用sx。我在documentation 中没有看到任何示例。

【讨论】：

在这种情况下，我将 JSS 称为类，而不是传统的 CSS 类。在我在这篇文章中提供的示例中， sx={styles.baseBoxStyle} 可以正常工作。
我懂了。 styles.baseBoxStyle 是 js 对象。它假装只是暂时的不变。在这些情况下，通过破坏创建一个新对象将起作用。我很困惑你尝试像makeStyles 那样做类似的事情。
我正在从 v4 迁移到 v5，因为我在 v4 中使用了 makeStyles，而在 v5 中已弃用，我的目标是不必重新格式化我的所有样式。
是的。我是 MUI 的新手。我也有同样的问题。我找到参考点的所有示例都是用 v4 中的makeStyles 制作的。我可以在我的作品中使用传统方法，它可以工作，但我试图弄清楚如何以 v5 方式设置组件样式。

【解决方案5】：

如果你想组合 2 个类，并且你得到其中一个作为道具，你应该像这样工作

const componnent = (styles) => {
 return ( 
  <ListItem
    sx={[
      {
        width: 'auto',
        textDecoration: 'underline',
      },
      ...(Array.isArray(styles) ? styles : [styles]),
    ]}
  /> 
 )
}

你不能直接传播sx 因为SxProps (typeof sx) 可以是一个数组

【讨论】：