How to cross-reference components?

[oe-josh-martin]

In a component library context, given an atom that looks like

export const StyledContainer = defineSlotRecipe({
    className: 'container',
    description: 'Styles for Container',
    slots: ['root'],
    base: {
        root: {
            width: '100%',
        },
    },
});

how would I reference this in a separate atom? The only way I can see to do this is by adding .container__root as below.

export const StyledError = defineSlotRecipe({
    className: 'error',
    description: 'Styles for error messages',
    slots: ['root', 'text'],
    base: {
        root: {
            padding: token('spacing.md'),
            borderRadius: token('borderRadius'),
            '@media screen and (min-width: {breakpoints.md})': {
                padding: token('spacing.lg'),
            },
            '.container_root &': {
                padding: 0,
            },
        },
        text: {
            fontSize: '25px',
        },
    },
})

Ideally I'd like to not have to hardcode the class name here, rather reference StyledContainer const somehow, like you would in styled-components.

export const SomeStyledThing = styled.div`
   ...
`

export const SomeOtherThing = styled.div`
    ${SomeStyledThing} & {
        ...
    }
`

or in MUI's PigmentCSS

const SomeStyledThing = styled('div')``;

const SomeOtherThing = styled('button')({
    [`${SomeStyledThing} &`]: {
        ...
    },
});