Using an Emotion theme with parent selectors

[briefone]

I have an emotion theme like this:

const theme = {
    color: {color: 'red', '.parentClass &': {color: 'hotpink'}},
    padding: {'.parentClass &': {padding: '8px'}},
    margin: {'.parentClass &': {margin: '8px'}}
  }

and using it like: css={{ ...theme.color, ...theme.padding, ...theme.margin }} instead of the the props with the same parent selector being merged together or written separately only the last one is being outputted.

In this case the margin prop:

.parentClass .css-r7knwz-SomeText {
    margin: 8px;
}

instead of:

 .parentClass .css-r7knwz-SomeText {
   color: hotpink;
   padding: 8px;
   margin: 8px;
}

or

.parentClass .css-r7knwz-SomeText {
   color: hotpink;
}
.parentClass .css-r7knwz-SomeText {
   padding: 8px;
}
.parentClass .css-r7knwz-SomeText {
   margin: 8px;
}

Is there anyway to get this to work?

Demo:
https://stackblitz.com/edit/react-ts-cqqbr8

[Andarist]

You just need to merge your objects appropriately, if you spread them into a single object using spreads then only the last value for a given property will be preserved. This is how JavaScript works - it doesn't have to do anything with Emotion per see. If you use a deep merge then you can achieve what you want:
https://stackblitz.com/edit/react-ts-bjqxad?file=App.tsx

[briefone]

Awesome, thank you.