[英]How to style material-ui components with emotion
我想設置材質 Ui Tooltip 組件的樣式,並且我想定位它的工具提示和箭頭類,我應該如何將 styles 情感添加到它們?
我嘗試遵循本指南: 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 工具提示創建我的自定義組件,並將 styles 添加到工具提示 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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.