I use Fluent UI. I have a DetailsList component, and I used ScrollablePane to make the Header always on the top. After I used ScrollablePane, I had typescript error. I couldn't find any proper solutions to fix it. Is there a way to fix it?
<ScrollablePane
scrollbarVisibility={ScrollbarVisibility.auto}
styles={{
root: {
selectors: {
'.ms-ScrollablePane--contentContainer': {
scrollbarWidth: 6,
},
'.ms-ScrollablePane--contentContainer::-webkit-scrollbar': {
width: 6,
height: 6,
},
},
},
}}
>
<DetailsList
items={elements}
columns={columns}
selectionMode={SelectionMode.none}
setKey="none"
onColumnHeaderClick={() => setPreventSortIconOnRender(false)}
layoutMode={DetailsListLayoutMode.justified}
isHeaderVisible={true}
onRenderDetailsHeader={(headerProps, defaultRender) => {
return (
<Sticky
stickyPosition={StickyPositionType.Header}
isScrollSynced={true}
stickyBackgroundColor="transparent"
>
{defaultRender &&
defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cellName': {
fontWeight: 'normal',
fontSize: 'var(--font-size-0)',
},
},
},
},
})}
</Sticky>
);
}}
/>
</ScrollablePane>