如何在MUI v5的Styled Components中实现条件类（附v4迁移示例）

条件类逻辑的实现方式 #

在MUI v5的Styled Components体系里，实现条件样式有几种实用方案：

• Props直接控制样式：定义Styled组件时接收外部props，在样式规则里直接做条件判断，不用额外依赖clsx，是最简洁的实现方式。
• 结合clsx管理多类：如果要处理多个条件类或混合外部类名，依然可以用clsx，只是这里的类名由Styled组件生成，或是单独创建的样式类。
• sx属性辅助实现：不算纯Styled Components写法，但sx属性支持基于props的条件样式，适合快速处理简单逻辑。

v4 makeStyles代码迁移为Styled Components #

针对你给出的MUI v4示例，这里提供两种最优改写方案：

方案一：Props直接控制内联样式（推荐） #

这种写法无需依赖clsx，逻辑直接嵌入Styled组件，代码更紧凑：

import React from "react";
import styled from "@mui/material/styles/styled";

const StyledDiv = styled("div")<{ isRed?: boolean }>(({ isRed }) => ({
  color: isRed ? "red" : "inherit",
}));

export const Foo: React.FC<{ isRed?: boolean }> = ({ isRed }) => {
  return <StyledDiv isRed={isRed}>Hello World</StyledDiv>;
};

方案二：结合clsx管理条件类 #

如果习惯clsx的写法，或是要处理更复杂的多条件场景，可以这样实现：

import React from "react";
import clsx from "clsx";
import styled from "@mui/material/styles/styled";

// 基础容器组件
const StyledDiv = styled("div")({});

// 单独定义红色文本样式类
const RedTextClass = styled("div")({
  color: "red",
});

export const Foo: React.FC<{ isRed?: boolean }> = ({ isRed }) => {
  return (
    <StyledDiv className={clsx(isRed && RedTextClass)}>
      Hello World
    </StyledDiv>
  );
};

// 也可以在同一个Styled组件里通过props切换样式
const StyledDivAlt = styled("div")<{ isRed?: boolean }>(({ isRed }) => ({
  ...(isRed && { color: "red" }),
}));

补充说明 #

• 用MUI v5时，导入styled的路径是@mui/material/styles/styled，官方推荐用这个内置工具而非第三方styled-components包（底层兼容但内置工具更适配MUI生态）。
• 复杂场景下比如依赖主题、断点适配，都可以在styled的回调函数里通过theme参数获取MUI主题配置。

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