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未使用...

情感风格的内在成分

0 个答案: