如何修改MUI X-Charts中自定义MarkElement的尺寸？

• 直接添加内联样式：在MarkElement上通过style属性指定宽高，若原props已有style，可以合并避免覆盖：

const slotsMark = (props: MarkElementProps) => {
    return (
        <MarkElement {...props} style={{ ...props.style, width: '20px', height: '20px' }}/>
    )
}

• 通过自定义类名控制样式：先定义CSS类，再给MarkElement添加类名，同时保留原props中的类名：

.custom-mark-size {
  width: 24px;
  height: 24px;
}

const slotsMark = (props: MarkElementProps) => {
    return (
        <MarkElement {...props} className={`${props.className || ''} custom-mark-size`}/>
    )
}

• 检查组件专属尺寸属性：查看MarkElementProps的类型定义，若组件暴露了size、width、height这类专属属性，直接传入即可：

const slotsMark = (props: MarkElementProps) => {
    return (
        <MarkElement {...props} size="large" width={30}/>
    )
}

内容的提问来源于stack exchange，提问作者Danijel Kivaranovic