Reactjs 如何使用情感设置材质ui组件的样式

我想设置材质Ui工具提示组件的样式，我想针对它的工具提示和箭头类，我应该如何使用情感向它们添加样式

我试着遵循以下指南： 但我需要针对css类

这就是我所尝试的：

import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
import { experimentalStyled } from '@material-ui/core/styles';
import { customThemeOptions } from '../utils/globalStyles';
import { Global, css } from '@emotion/react';
const PtMuiTooltip = experimentalStyled(
      ({ className, title, children, ...other }: TooltipProps) => (
        <Tooltip
          title={title}
          style={{
            '& .MuiTooltip-arrow': {
              color: `${customThemeOptions.pt.palette.primary.main}`,
            },
          }}
          {...other}
        >
          {children}
        </Tooltip>
      ),
    )`
      background-color: ${customThemeOptions.pt.palette.primary.main};
      box-shadow: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.06)';
      padding: '1.5rem';
      border-radius: '0';
    `;

从'@material ui/core/Tooltip'导入工具提示，{TooltipProps}；
从“@materialui/core/styles”导入{experimentalStyled}；
从“../utils/globalStyles”导入{customThemeOptions}；
从'@emotion/react'导入{Global，css}；
常数PtMuiTooltip=实验方式(
（{className，title，children，…other}:TooltipProps）=>(
{儿童}
),
)`
背景色：${customThemeOptions.pt.palete.primary.main}；
方框阴影：“0px 1px 3px rgba（0,0,0,0.1），0px 0px 10px rgba（0,0,0,0.06）”；
填充：“1.5雷姆”；
边界半径：“0”；
`;

---

我只想从材质ui工具提示创建自定义组件，并将样式添加到工具提示“圆形”和“箭头颜色”。我应该如何通过情感和物质界面实现它？

这个例子应该有效

    import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
    
    import { experimentalStyled } from '@material-ui/core/styles';
    import { customThemeOptions } from '../utils/globalStyles';
    
    const PtMuiTooltip = experimentalStyled(
      ({ className, title, children, ...other }: TooltipProps) => (
        <Tooltip
          title={title}
          classes={{ popper: className, arrow: 'arrow', tooltip: 'tooltip' }}
          {...other}
        >
          {children}
        </Tooltip>
      ),
    )`
      & .tooltip {
        background-color: ${customThemeOptions.pt.palette.primary.main};
        box-shadow: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.06)';
        padding: '1.5rem';
        border-radius: '0';
      }
      & .arrow {
        color: ${customThemeOptions.pt.palette.primary.main};
      }
    `;
    
    export default PtMuiTooltip;

从'@material ui/core/Tooltip'导入工具提示，{TooltipProps}；
从“@materialui/core/styles”导入{experimentalStyled}；
从“../utils/globalStyles”导入{customThemeOptions}；
常数PtMuiTooltip=实验方式(
（{className，title，children，…other}:TooltipProps）=>(
{儿童}
),
)`
&.工具提示{
背景色：${customThemeOptions.pt.palete.primary.main}；
方框阴影：“0px 1px 3px rgba（0,0,0,0.1），0px 0px 10px rgba（0,0,0,0.06）”；
填充：“1.5雷姆”；
边界半径：“0”；
}
&.阿罗{
颜色：${customThemeOptions.pt.palete.primary.main}；
}
`;
导出默认PtMuiTooltip；