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就可以从烦恼转变为情感

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

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' });

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

有没有一种没有“风格化”的情感主题方法

2 个答案: