Skip to content

Breaks layout when using nested selectors from styled-components #644

Open
@Artem29383

Description

@Artem29383

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions