Style material-使用@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不支持className属性(这是styled函数注入的属性) -- className属性只需转发到由工具提示包装的元素。

解决方案是拦截styled传递的道具，并利用Tooltip的classes道具，如下所示：

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