Стиль всплывающей подсказки для материала с помощью @ emotion / Styled

Question

Можно ли стилизовать всплывающие подсказки для материалов и пользовательского интерфейса, используя стилевую функцию из @ emotion / Styled?

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

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

Я пытался использовать глобальные классы Mui et c. но не удалось. Я знаю, что можно использовать createMuiTheme и <ThemeProvider>, чтобы применить его, но тогда тема по умолчанию также применяется к дочерним элементам компонента «Подсказка».

Answer 1

Сложность со стилем Tooltip таким образом заключается в том, что Tooltip не поддерживает className проп (это то, что вводит функция styled) - опора className будет просто перенаправлена ​​на к элементу, окутанному всплывающей подсказкой.

Решение состоит в том, чтобы перехватить реквизит, переданный styled, и использовать classes реквизит 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