使用 @emotion/styled 设置材质 UI 工具提示答案

【问题标题】：Style material-ui tooltip using @emotion/styled使用 @emotion/styled 设置材质 UI 工具提示
【发布时间】：2020-05-13 00:54:51
【问题描述】：

是否可以使用 @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 组件的子项。

【问题讨论】：

标签： css reactjs material-ui emotion

【解决方案1】：

以这种方式对Tooltip 进行样式设置的困难在于Tooltip 不支持className 属性（这是styled 函数注入的内容）——className 属性只会被转发到被工具提示包裹的元素。

解决方法是拦截styled传递的props，利用Tooltip的classesprops，如下图：

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

【讨论】：