Reactjs 在 React 中将 MUI 样式外包到单独的文件中

我try 将修改Mui样式的工作外包到不同的文件中，但问题是，当我使用"className={style es.h6}"而不是"Variant="h6"时，*.mode.css不起作用.

下面是我try 修改的一个示例:

const Void: React.FC<VoidProps> = ({name}) => {

  return (
    <>
      <Typography variant="h6">
        <BlockIcon />
        {name}
      </Typography>
    </>
  );
};

可以在css文件中编写MUI SX吗？或者有没有其他解决方案，其中样式不是在组件本身中编写的？

有人知道解决这个问题的办法吗？我有要求把样式，如css，sx和其他外的组件文件.使用MUI可以做到这一点吗？

谢谢你的帮助.

编辑/解决方案:

它现在可以与mode.css一起使用，如下例所示:

Void.tsx:

import React from "react";
import clsx from "clsx";
import styles from "./cssModules/Void.module.css"
import { Typography } from "@mui/material";
import BlockIcon from "@mui/icons-material/Block";



/**
 * @module Void
 *
 * Displays a void element with a block icon and a name.
 *
 * @param {string} name - Name of the void element
 * @returns {JSX.Element} - Void component
 */

type VoidProps = {
  name: string;
};

const Void: React.FC<VoidProps> = ({name}) => {

  return (
    <>
      <Typography className={clsx(styles.Typography)}>
        <BlockIcon />
        {name}
      </Typography>
    </>
  );
};

export default Void;



Void.module.css:

.Typography {
  color: rgb(255, 47, 0);
  background: linear-gradient(rgb(218, 143, 14), rgb(217, 255, 0)) padding-box,
  linear-gradient(to right, rgb(0, 0, 0), rgb(204, 50, 50)) border-box;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 0.1em 0.6em;
  border: 4px solid transparent;
  border-radius: 50em !important;
  width: 4.7em; 
  max-width: 22em;
  font-size: 1.9em !important;
}

谢谢你帮助维克多·L.