有没有办法在没有 "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 元素（也有一个庞大的代码库，无需使用 styled)

即可更轻松地从 sass 迁移到情感

我知道我可以做类似的事情：

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

然后 jsx:

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

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

有更好的方法吗？以某种方式将 css 包裹起来，以便注入主题变量 ?

Answer 1

您可以使用 theme HoC。但是如果你关心的是传递给滑块的 prop，这个 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' });

Answer 2

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>
)

有没有办法在没有 "styled" 的情况下以情感为主题

Is there a way to theme with emotion without "styled"

javascript

css

emotion

reactjs