如何用Emotion为MUI5 Tooltip设置样式？遇TS及构建错误求助

1. 解析错误（Parsing error: '>' expected） #

这个错误是因为代码中使用了HTML转义字符（<、>、=>），TSX文件需要使用原生JSX语法符号：<、>、=>，转义字符会被解析器识别为普通文本，导致语法报错。

2. TypeScript类型错误 #

错误提示'Tooltip' refers to a value, but is being used as a type here，核心是自定义组件的类型处理不符合MUI styled组件的要求，同时转义字符也会干扰TS的类型推断。

修正后的简洁代码 #

直接通过styled的CSS选择器修改Tooltip样式，避免中间组件的类型问题：

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';

const StyledTooltip = styled(Tooltip)(({ theme }) => ({
  '& .MuiTooltip-tooltip': {
    backgroundColor: '#f5f5f9',
    color: 'rgba(0, 0, 0, 0.87)',
    maxWidth: 220,
    border: '1px solid #dadde9',
  },
}));

保留中间组件写法的修正版 #

如果需要保留原有的中间组件结构，修正类型和转义后的代码如下：

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Tooltip, { TooltipProps } from '@mui/material/Tooltip';

const ToBeStyledTooltip = ({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ tooltip: className }} />
);

const StyledTooltip = styled(ToBeStyledTooltip)(({ theme }) => ({
  backgroundColor: '#f5f5f9',
  color: 'rgba(0, 0, 0, 0.87)',
  maxWidth: 220,
  border: '1px solid #dadde9',
}));

错误原因说明 #

• 解析错误：复制代码时带入的HTML转义字符破坏了TSX语法结构，替换为原生JSX符号即可解决。
• 类型错误：原代码的转义字符导致TS无法正确识别组件类型，同时部分MUI版本中，直接传递classes需要确保className与TooltipProps的类型兼容，使用选择器的写法更简洁且不易出错。

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