使用 React Styled System 从主题访问值

Question

在我的 React 项目中，我使用 Emotion and 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

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

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

使用 React Styled System 从主题访问值

Access values from theme with React Styled System

emotion

responsive-design

reactjs

css-grid

styled-system