使用 @emotion/styled 设置材质-ui 工具提示的样式

Question

是否可以使用 @emotion/styled 中的 styled 函数来设置 Material-ui 工具提示的样式？

import { Tooltip } from '@material-ui/core';
import styled from '@emotion/styled';

const MyTooltip = styled(Tooltip)`
    // style the tooltip label
`

我尝试使用全局 Mui 类等，但没有成功。我知道一个选项是使用createMuiTheme并使用<ThemeProvider>来应用它，但是默认主题也会应用到 Tooltip 组件的子级。

Answer 1

以这种方式设置样式的困难Tooltip在于Tooltip不支持classNameprop（这是函数注入的内容styled）—— classNameprop 将简单地转发到工具提示包裹的元素上。

解决方案是拦截传递过来的 propsstyled并利用classes的 props，Tooltip如下所示：

import React from "react";
import { StylesProvider } from "@material-ui/core/styles";

import Tooltip from "@material-ui/core/Tooltip";
import styled from "@emotion/styled";

const StyledTooltip = styled(({ className, ...other }) => (
  <Tooltip classes={{ tooltip: className }} {...other} />
))`
  font-size: 2em;
  color: blue;
  background-color: yellow;
`;
export default function App() {
  return (
    <StylesProvider injectFirst>
      <StyledTooltip title="Test tooltip">
        <span>Hover over me</span>
      </StyledTooltip>
    </StylesProvider>
  );
}

相关 GitHub 问题：https://github.com/mui-org/material-ui/issues/11467