是否有一种方式来主题与情感没有“风格”

Question

随着emotion（https://github.com/emotion-js/emotion）我知道我可以与css和styled一起主题，如：

const carouselCss = ({ theme }) => css`
 .. css properties etc
`;

const CarouselDiv = styled('div')`
  ${carouselCss};
`;

然后在JSX中：

<ThemeProvider theme={{ stuff: 'blah' }}>
  <CarouselDiv>
        ..
  </CarouselDiv>
</ThemeProvider>

但是有没有任何优雅的主题只有css - 不喜欢使用组件化的styles因为我想在JSX中保留语义html元素（也有一个庞大的代码库，它更容易从sass迁移到情感而不必使用styled ）

我知道我可以这样做：

const carouselCss = (theme) => css`
 .. css properties etc
`;

那么jsx：

<div className={carouselCss(this.props.theme)}>
..
</div>

但这意味着从组件中一直传递一个主题道具 - 这有点麻烦

有一个更好的方法吗 ？不知何故用css包装东西，所以它注入了主题变量？

Answer 1

你可以使用theme HoC。但如果你的关注是道具传递给滑块，那么这个HoC基本上也是这样做的，即将theme注入this.props.theme。就个人而言，如果可能的话，我会使用ThemeProvider API，也许是函数式主题，正如文档中所指出的那样：

// function-style theme; note that if multiple <ThemeProvider> are used,
// the parent theme will be passed as a function argument

const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' });