React中MUI样式抽离至单独文件的问题与解决方法

尝试将MUI组件的样式修改抽离到单独的*.module.css文件时，使用className={styles.h6}替代variant="h6"后样式无法生效。原始代码如下：

const Void: React.FC<VoidProps> = ({name}) => {
  return (
    <>
      <Typography variant="h6">
        <BlockIcon />
        {name}
      </Typography>
    </>
  );
};

想了解是否可以在CSS文件中编写MUI的sx样式，或是有其他将样式移出组件文件的方案，实现把CSS、sx等样式放在组件外部的需求。

通过module.css结合clsx解决了样式生效问题，最终实现代码如下：

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;
}

感谢Victor L的帮助。

内容的提问来源于stack exchange，提问作者hsulso