styled-components / styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://styled-components.com
MIT License
40.12k stars 2.48k forks source link

Popover property being removed from attributes #4256

Open zeshan-786 opened 3 months ago

zeshan-786 commented 3 months ago

Issue

Example

export const Container = styled.div.attrs<{ popover?: 'auto' | 'manual' }>(({ popover }) => ({
    popover,
    // 'popover': 'auto' // tried static property as well but no luck
}))`
    position: absolute;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
`
export const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
    {
        children,
        popover = 'auto',
        ...props
    },
    ref
) {
    const { isPopoverAvailable } = usePopover();

    return (
        <Container
            popover={isPopoverAvailable ? popover : undefined}
            role="dialog"
            ref={ref}
            {...props}
        >
            {children}
        </Container>
    );
});

Expected Behavior

We should get popover property on container

Actual Behavior

We don't get popover on container in the div attributes but we get it react component

image image
drl990114 commented 2 months ago

This seems to be caused by StyleSheetManager's shouldForwardProp, I removed this and solved the problem.