Внутренняя составляющая стиля эмоций

Question

У меня есть базовый компонент без темы, и я хочу, чтобы тема и ее дочерние элементы были возможны с помощью Emotion?

давайте я получу:

BaseComponent.jsx

const Wrapper = styled('div')``;
const Inner1 = styled('div')``;
const Inner2 = styled('div')``;

export MyBaseComponent = () => (
  <Wrapper>
    <Inner1 />
    <Inner2 />
  </Wrapper>
);

ThemedMyComponent.jsx

export ThemeMyComponent = () => {
   ???
  return (
    <MyBaseComponent ??? ??? ??? />
  )
}

все мои тематические материалы находятся во втором компоненте, и я хотел бы сложную логику и украсить BaseComponent только внутри ThemedMyComponent,

Первоначальный подход будет:

const Wrapper = styled('div')``;
const Inner1 = styled('div')``;
const Inner2 = styled('div')``;

export MyBaseComponent = (props) => (
  <Wrapper className={props.wrapperClassName}>
    <Inner1 className={props.inner1ClassName}/>
    <Inner2 className={props.inner2ClassName}/>
  </Wrapper>
);

и передать ему 3 className, что означает, что я должен использовать withTheme и делать много cxи, не говоря уже о том, что вы больше не можете делать это с эмоцией 10. Есть ли более функциональный способ сделать это?

Делая это, все, что мне нужно, это просто css от ClassNames сделать обратный вызов, который делает styled неиспользованный...