是否可以在 React 管理中使 React 管理中的"Save"按钮粘性

Question

我使用的是reactadmin，由于表单太长，我需要使编辑页面中的保存按钮具有粘性，但保存按钮默认在表单内部。是否可以使保存按钮粘性到页面的底部

const StickyEditToolbar: React.FC<StickyEditToolbarProps> = ({ size = 'medium', ...props }) => {
// overriding default styles of react admin toolbar
const useStyles = makeStyles({
toolbar: {
position: 'sticky',
bottom: '20px',
backgroundColor: 'transparent',
},
});
const classes = useStyles();
return (
<Toolbar {...props} alwaysEnableSaveButton classes={classes}>
<SaveButton
redirect={false}
submitOnEnter={false}
className={clsx(size === 'medium' && 'w-48', size === 'large' && 'w-56', size === 'small' && 'w-36')}
/>
</Toolbar>
);
};
export default StickyEditToolbar;
<Edit {...props} >
<SimpleForm redirect={false}  toolbar={<StickyEditToolbar />}>
<TextField label='Email' source='user.email' />
<TextField label='First name' source='user.firstName' />
<TextField label='Last name' source='user.lastName' />
........
</SimpleForm>
</Edit>

Answer 1

是！您可以使用<SimpleForm toolbar>注入自定义工具栏，并使用sx道具来操纵样式。由于position:stickyCSS规则的应用方式，您还必须重置包含元素的溢出。

<Edit {...props} sx={{ "& .MuiPaper-root": { overflow: "visible" } }}>
<SimpleForm
redirect={false}
toolbar={<Toolbar sx={{ position: "sticky", bottom: 0, zIndex: 2 }} />}
>
<TextField label='Email' source='user.email' />
<TextField label='First name' source='user.firstName' />
<TextField label='Last name' source='user.lastName' />
........
</SimpleForm>
</Edit>

在进行现场测试https://codesandbox.io/s/wild-rain-j23g2e?file=/src/posts/PostEdit.tsx