I have global Pagination component where I want to pass custom props with padding, specific only to the component where it's rendered. I want to pass padding props ( last prop ), this is how I pass it:
<PaginationWrapper
pageOptions={pageOptions}
pageCount={pageCount}
gotoPage={gotoPage}
nextPage={nextPage}
previousPage={previousPage}
setPageSize={setPageSize}
pageIndex={pageIndex}
pageSize={pageSize}
padding={'8px'}
/>
This is how I implement it in PaginationWrapper, it should be used only in StyledTxTButton components :
export const PaginationWrapper = (props, { padding }) => {
const { useTranslationFunc } = useTranslationFacade();
return (
<StyledPaginationWrapper>
<StyledTxtButton
onClick={() => props.gotoPage(0)}
type={'button'}
padding={padding}
>
{'<<'}
</StyledTxtButton>
<StyledTxtButton
onClick={() => props.previousPage()}
type={'button'}
padding={padding}
>
{useTranslationFunc('Poprzednia')}
</StyledTxtButton>
<StyledTxtButton
onClick={() => props.nextPage()}
type={'button'}
padding={padding}
>
{useTranslationFunc('Następna')}
</StyledTxtButton>
<StyledTxtButton
onClick={() => props.gotoPage(props.pageCount - 1)}
type={'button'}
padding={padding}
>
{'>>'}
</StyledTxtButton>
<StyledSpan>
{useTranslationFunc('Strona')}{' '}
<StyledStrong>
{props.pageIndex + 1} {useTranslationFunc(' z ')}
{props.pageOptions.length}
</StyledStrong>
</StyledSpan>
<StyledSelect
variant="standard"
value={props.pageSize}
onChange={(e) => props.setPageSize(Number(e.target.value))}
>
{[10, 25, 50, 100].map((option) => (
<MenuItem key={option} value={option}>
<ListItemText>Pokaż {option}</ListItemText>
</MenuItem>
))}
</StyledSelect>
</StyledPaginationWrapper>
);
};
And here is how it's implemented in StyledComponents:
type PaginationProps = {
padding?: string;
};
export const StyledTxtButton = styled.a`
${(props) => props.theme.breakpoints.up('xs')} {
margin-top: 0;
/* padding: 0 12px; */
padding: ${({ padding }: PaginationProps) =>
padding ? `0 ${padding}` : `0 12px`};
}
What I do wrong that passed prop with padding of 8px is not rendered ? It works with any value I put after : in ternary operator so it evidently don't see passed padding prop