时间戳

首页 > 解决方案 > 情感风格内部组件

javascript - 情感风格内部组件

问题描述

我有一个没有主题的基本组件，我希望为它及其子组件设置主题，是否可以使用 Emotion？

让我有：

基本组件.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未使用......

标签： javascriptcssreactjsemotion

解决方案

推荐阅读