const renderToolbar = (Toolbar: (props: ToolbarProps) => ReactElement) => (
<Toolbar>
{(slots: ToolbarSlot) => {
const { ZoomOut } = slots;
return (
<div
style={{
alignItems: 'center',
display: 'flex',
}}
>
<div style={{ padding: '0px 2px' }}>
<ZoomOut>
{(props) => (
<button
style={{
backgroundColor: '#357edd',
border: 'none',
borderRadius: '4px',
color: '#ffffff',
cursor: 'pointer',
padding: '8px',
}}
onClick={props.onClick}
>
Zoom out
</button>
)}
</ZoomOut>
</div>
...
</div>
);
}}
</Toolbar>
);
const defaultLayoutPluginInstance = defaultLayoutPlugin({
renderToolbar,
});