问题描述
我想为 Material Ui Tooltip 组件设置样式,并且我想定位它的工具提示和箭头类,我应该如何为它们添加带有情感的样式?
我尝试遵循本指南:https://github.com/mui-org/material-ui/issues/11467#issuecomment-423845900 但我需要定位 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.1),0px 0px 10px rgba(0,0.06)';
padding: '1.5rem';
border-radius: '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.1),0px 0px 10px rgba(0,0.06)';
padding: '1.5rem';
border-radius: '0';
}
& .arrow {
color: ${customThemeOptions.pt.palette.primary.main};
}
`;
export default PtMuiTooltip;