MUI v5结合TypeScript使用styled()替代makeStyles的实现问题

基础无自定义Props场景 #

你当前编写的代码本身已经适配 TypeScript，无需额外修改即可直接使用：
styled("div") 会自动继承所有原生div的HTML属性（如className、onClick、id等），TS 会自动做类型校验和属性提示，你直接在组件中导入使用即可。

带自定义Props场景 #

如果你需要给组件添加自定义的控制属性，可按如下步骤添加类型声明：

1. 先定义自定义Props的类型接口
2. 将类型作为泛型参数传给styled方法
3. 可选配置shouldForwardProp避免自定义属性被传递到DOM节点产生无效属性警告

示例代码如下：

import { styled } from "@mui/system";

// 定义自定义Props类型
interface WelcomeDivProps {
  // 示例自定义属性：控制是否高亮
  isHighlight?: boolean;
  // 可根据需求添加更多自定义属性
}

// 给styled组件绑定类型
export const WelcomeDiv = styled("div", {
  // 配置不需要透传到DOM的自定义属性
  shouldForwardProp: (prop) => prop !== "isHighlight",
})<WelcomeDivProps>(({ theme, isHighlight }) => ({
  // 样式可以直接根据自定义属性动态调整，theme的类型会自动推断
  background: isHighlight ? "red" : "blue",
  padding: theme.spacing(2),
}));

使用时TS会自动提示支持的属性：

return (
  <WelcomeDiv isHighlight={true}>
    欢迎内容
  </WelcomeDiv>
);

常见注意事项 #

• 如果是基于MUI内置组件（如Button、Paper）封装styled组件，原有组件的Props会自动继承，仅需添加自定义Props的类型即可：

  import Button from "@mui/material/Button";
  import { styled } from "@mui/system";
  
  interface StyledBtnProps {
    round?: boolean;
  }
  
  export const StyledButton = styled(Button, {
    shouldForwardProp: prop => prop !== "round"
  })<StyledBtnProps>(({ round }) => ({
    borderRadius: round ? "999px" : "4px"
  }));
  

• 不需要手动给styled返回的组件声明React.FC类型，MUI的styled工具已经自带完善的类型推断，手动声明反而可能导致类型冲突。
• 如果需要扩展MUI全局主题的类型，在项目中新增theme.d.ts文件扩展MUI主题接口即可，styled回调中获取的theme会自动应用扩展后的类型。

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