reactjs - 使用 React Styled System 从主题访问值

Question

在我的 React 项目中，我将Emotion和Styled System用于我的设计系统和样式。

在theme.js我有一些值（创建响应式 CSS 网格）：

  template: {
    xs: {
      rows: 'auto',
      columns: 'auto',
    },
    sm: {
      rows: 'auto',
      columns: 'repeat(2,1fr)',
    },
    md: {
      rows: 'auto',
      columns: 'repeat(4,1fr)',
    },
    lg: {
      rows: 'auto',
      columns: 'repeat(6,1fr)',
    },
  },

如何从我的 theme.js 访问这些键，以便我可以像这样使用它们：

<Grid
  gridTemplateColumns={[
    theme.template.xs.columns,
    theme.template.sm.columns,
    theme.template.md.columns,
  ]}
  gridGap="30px"
>

我已经使用了 Emotion 的 ThemeProvider：

import { ThemeProvider } from 'emotion-theming';

<ThemeProvider theme={theme}>

这如何与 Styled System 库一起使用，这里的最佳实践是什么？

Answer 1

您可以使用useTheme挂钩@emotion/react来访问主题对象：

function Component(props) {
  const theme = useTheme()
  return (
   <Grid
     gridTemplateColumns={[
      theme.template.xs.columns,
      theme.template.sm.columns,
      theme.template.md.columns,
    ]}
   gridGap="30px"
  >
  )
}

参考：

[1] 主题 - UseTheme https://emotion.sh/docs/theming#usetheme