Прокинуть пропс в styled

Question

У меня есть такой компонент

export const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
    <Tooltip {...props} classes={{ popper: className }} />
))({
    [`& .${tooltipClasses.tooltip}`]: {
        maxWidth: 395,
    },
});

обычно я пишу немного не так, это я где-то нашел и работает оно правильно, но мне нужно на место maxWidth прокинуть переменную, пропс, раньше я бы сделал так interface CustomWidthTooltipProps { customWidth: string; }

export const CustomWidthTooltip = styled(Tooltip, {
    shouldForwardProp: (props) => props !== 'customWidth',
})<CustomWidthTooltipProps>(({customWidth, }) => ({
    [`& .${tooltipClasses.tooltip}`]: {
        maxWidth: customWidth,
    },
}));

испольщовал бы shouldForwardProp иначе без shouldForwardProp когда пытаешь передать пропс в компонент, там где вызываешь его, начинает подчеркивать красным, с shouldForwardProp такой проблемы нет, но может мне и не нужно это использовать, подскажите как сделать такое

export const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
    <Tooltip {...props} classes={{ popper: className }} />
))({
    [`& .${tooltipClasses.tooltip}`]: {
        maxWidth: width,
    },
});

// здесь width это переменная в которую я передам где-то 395, где-то 310 и затем вызову вот так

  <CustomWidthTooltip
                customWidth={'500px'}
                arrow
                title={title}
                placement='right'
            >
                <Typography ml={0.5} variant='caption'>
                    {item}
                </Typography>
            </CustomWidthTooltip>

Answer 1

Прокинуть нужный пропс можно следующим способом.

export const CustomWidthTooltip = styled(Tooltip)<{width: string}>`
  & .${tooltipClasses.tooltip}: {
    maxWidth: ${({width}) => width}; 
  }
`

В дженерик также можно прокинуть интерфейс.

interface CustomTooltip{
  width: string
}

export const CustomWidthTooltip = styled(Tooltip)<CustomTooltip>`
  & .${tooltipClasses.tooltip}: {
    maxWidth: ${({width}) => width}; 
  }
`

БЛОГ НА HUSL

Прокинуть пропс в styled

Ответы (1 шт):