我正在向我的 React 應用程式添加一個 MaterialUI 工具提示,我需要有兩個文本行。一個將被視為標題主文本,另一個將被視為子標簽。
在螢屏截圖中,您可以看到我卡在哪里
我們的目標是把所有東西都放在一張卡片上
The label should read: Self-assessment opened: [n]
Sub-label: Click to drill down
我擁有的 Figma 示例顯示了卡片的外觀
我是 MUI 的新手,不知道該怎么做,這是我到目前為止的代碼
import { Box, Popper, Tooltip } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useTheme } from '@mui/styles';
import { useIntl } from 'react-intl';
// Use styles from src/analytics/components/TooltipCard/TooltipCard.js to make it look the same
const TooltipCardPopper = styled(Popper)(({ theme }) => ({
'& > div': {
...theme.typography.caption,
backgroundColor: 'white',
boxShadow: theme.shadows[7],
borderRadius: '5px',
paddingLeft: theme.spacing(1.2),
paddingRight: theme.spacing(1.2),
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.palette.grey[300],
},
}));
const calculateTotals = ({ data }) =>
data?.reduce(function (accumulator, item) {
return accumulator item.total;
}, 0);
const CenteredMetricToolTip = ({ position, data }) => {
const theme = useTheme();
const intl = useIntl();
const show = !!position;
const total = calculateTotals({ data });
return (
<Tooltip
open={show}
disableFocusListener
disableHoverListener
disableTouchListener
disableInteractive
title={intl.formatMessage({ defaultMessage: 'Click to drill down' })}
PopperComponent={TooltipCardPopper}
TransitionProps={{ timeout: 0 }} // timeout more than 0 => transition => causes re-positioning and blinking
>
<Box
sx={{
position: 'absolute',
display: show ? 'block' : 'hide',
left: `${position?.x ?? 0}px`,
top: `${position?.y ?? 0}px`,
}}
>
{intl.formatMessage(
{ defaultMessage: ' Self-assessment opened: {total}' },
{ total },
)}
</Box>
</Tooltip>
);
};
export default CenteredMetricToolTip;
uj5u.com熱心網友回復:
嘗試將title
屬性值從更改 title={intl.formatMessage({ defaultMessage: 'Click to drill down' })}
為
title={
<div>
<div>{intl.formatMessage({ defaultMessage:"Self-assessment opened: [n]" })}<div>
<div>{intl.formatMessage({ defaultMessage:"Click to drill down"})}</div>
<div>
}
在Tooltip
組件上
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/508417.html
標籤:javascript css 反应