reactjs - 如何用情感来设计 Material-ui 组件
问题描述
我想为材质 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, 0, 0.1), 0px 0px 10px rgba(0, 0, 0, 0.06)';
padding: '1.5rem';
border-radius: '0';
`;
我想要的只是从材料 ui 工具提示创建我的自定义组件,并将样式添加到工具提示 bakcground 和箭头颜色。我应该如何用情感和material-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;
推荐阅读
- c# - 结构为 ReadOnlyMemory
表示 - node.js - 调用 Rest API 时 Node.js Discord 机器人消息为空
- racket - 球拍有点不一致
- mongodb - 将文档合并为单个文档
- jquery - 试图拖放不同的列,但它失败了
- macos - NSBundle bundleWithIdentifier 为其他应用程序返回 null
- templates - 将 Handlebars 组件输出作为参数传递给帮助程序
- ios - Swift - 从 URL 下载图像后如何调整 UICollectionViewCells 的大小?
- python - 是否可以在 Python 中运行/启动沙盒 Lua 脚本?
- python - 文件路径未正确读取