【问题标题】: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,利用Tooltipclassesprops,如下图:

    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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-03
      • 1970-01-01
      • 2019-12-23
      • 2019-07-03
      相关资源
      最近更新 更多