Repro: https://codesandbox.io/s/elated-babbage-46ez1w?file=/example.tsx
It's not possible use children render function to override an entire slot, if children are already used. The above is a minimal repro of an issue that can be seen in Fluent in the AccordionHeader component. The component renders the button slot which contains its own children. JSX children will win over props children - which is how children render functions are rendered by getSlots
|
const { slots, slotProps } = getSlots<AccordionHeaderSlots>(state); |
|
|
|
return ( |
|
<AccordionHeaderContext.Provider value={contextValues.accordionHeader}> |
|
<slots.root {...slotProps.root}> |
|
<slots.button {...slotProps.button}> |
|
{state.expandIconPosition === 'start' && <slots.expandIcon {...slotProps.expandIcon} />} |
|
{slots.icon && <slots.icon {...slotProps.icon} />} |
|
{slotProps.root.children} |
|
{state.expandIconPosition === 'end' && <slots.expandIcon {...slotProps.expandIcon} />} |
|
</slots.button> |
|
</slots.root> |
|
</AccordionHeaderContext.Provider> |
Requirements for children render function:
- should be able to override the entire slot
- When rendering the original children, should respect nested slots.
Repro: https://codesandbox.io/s/elated-babbage-46ez1w?file=/example.tsx
It's not possible use children render function to override an entire slot, if
childrenare already used. The above is a minimal repro of an issue that can be seen in Fluent in theAccordionHeadercomponent. The component renders thebuttonslot which contains its own children. JSX children will win over props children - which is how children render functions are rendered bygetSlotsfluentui/packages/react-components/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx
Lines 13 to 25 in 220b321
Requirements for children render function: