小编Asi*_*ani的帖子

正如我在 Gatsby 中所理解的，页面查询将在父级进行，并将作为道具传递给子组件。当您在组件内部并想要获取一些数据以传递给它时，还有一个<StatiQuery />或useStaticQuery钩子。什么是最佳实践，我应该什么时候使用一个？

我猜这归结为 React 本身，例如，如果我们有需要更深层次数据的组件，我们会使用Context并将其传递下去，这样您就不必在更深层次传递道具。和这个一样吗？此外，如果有人有他们使用的任何模式。

目前这就是我正在做的，ThemeProvider在我的组件文件上方传递一个：

import React from 'react';
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import MUIButton from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff0000"
    }
  },
  typography: {
    fontFamily: 'Nunito Sans, sans-serif',
    button: {
      textTransform: 'none'
    }
  },
  shape: {
    borderRadius: 3
  }
})


export default ({ variant, children }) => {
  return (
    <ThemeProvider theme={theme}>
      <MUIButton
        color="primary"
        variant={variant}
      >
        {children}
      </MUIButton>
    </ThemeProvider>
  )
}

我试图弄清楚如何在 Storybook 中在全球范围内做到这一点。这是我构建的第一个组件，名为Button. 所以我希望能够将主题放在一个外部文件中，并ThemeProvider在更高级别上输入，这样我就不必包装每个组件。希望这是有道理的，如果有人有任何想法。