javascript - 有没有一种方法可以在没有 "styled"的情况下以情感为主题

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>

但这意味着始终从组件传递主题 Prop - 这有点麻烦

有更好的方法吗？以某种方式用一些东西包裹 css 以便它注入(inject)主题变量？

Answer 1

ThemeProvider 将为您提供。这是一个同时显示 styled 和 css 选项的示例:

/** @jsx jsx */
import { jsx } from '@emotion/core'
import styled from '@emotion/styled'
import { ThemeProvider } from 'emotion-theming'

const theme = {
  colors: {
    primary: 'hotpink'
  }
}

const SomeText = styled.div`
  color: ${props => props.theme.colors.primary};
`

render(
  <ThemeProvider theme={theme}>
    <SomeText>some text</SomeText>
    <div css={theme => ({ color: theme.colors.primary })}>
      some other text
    </div>
  </ThemeProvider>
)