typescript-plugin-styled-components icon indicating copy to clipboard operation
typescript-plugin-styled-components copied to clipboard

Breaks layout when using nested selectors from styled-components

Open Artem29383 opened this issue 3 years ago • 1 comments

Styles stop working when inside styled you try to style a nested element Style border-top for InnerContainer not working

const InnerContainer = styled.div'
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
';

const Container = styled.div'
    padding: 0 24px;

    & + & {
        ${InnerContainer} {
            border-top: 1px solid ${theme.palette.bg.level3};
        }
    }
';
image image

Expected: Style border-top for InnerContainer working.

Artem29383 avatar Aug 03 '22 15:08 Artem29383

@Artem29383 I could not reproduce the issue. You might have some custom settings for the display name that takes into account the filename and doesn't translate it correctly.

Please share your settings for the transformer if you need an assistance.

Igorbek avatar Jun 05 '23 22:06 Igorbek