¿Alguien sabe cómo usar múltiples clases de CSS con MUI 5 SX prop? Creé una clase base que quiero usar con mis componentes de Box pero uso una segunda clase específicamente para el texto dentro de Box. La aplicación de la clase base, como sx={styles.baseBoxStyle} funciona, pero sx={styles.baseBoxStyle styles.customBoxFontStyle} devuelve un error. El fragmento de código completo y la zona de pruebas se proporcionan a continuación. ¡Cualquier ayuda es muy apreciada!

Caja de arena: 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>; }