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

Question

有谁知道如何将多个 CSS 类与 MUI 5 SX Prop 一起使用？我创建了一个基类，我想将它与我的 Box 组件一起使用，但使用第二个类专门用于 Box 内的文本。应用基类，如sx={styles.baseBoxStyle}有效，但 sx={styles.baseBoxStyle styles.customBoxFontStyle}返回错误。下面提供了完整的代码片段和沙箱。非常感谢任何帮助!
沙盒: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>;
}

Answer 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