reactjs - ThemeProvider 对于样式化组件的主题化是必要的吗？

Question

我正在使用样式组件，我想知道是否有必要使用 ThemeProvider。

这是文档中的示例。

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// We are passing a default theme for Buttons that arent wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

// Define what props.theme will look like
const theme = {
  main: "mediumseagreen"
};

render(
  <div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>
);

但我想知道我是否可以这样做:

// theme.js
const theme = {
  main: "mediumseagreen"
};
export default theme;


// main.js
import theme from 'theme';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${theme.main};
  border: 2px solid ${theme.main};
`;

  render(
  <div>    
      <Button>Themed</Button>
  </div>
);

如果我不需要Normal Button(所有按钮都会有主题)，并且我不需要动态主题(例如更改为深色模式)，我可以使用第二个吗方法？有没有我没有想到的缺点？

Answer 1

是的，这是有效代码。

但是它也有一些缺点。 ThemeProvider 使用 React Context API 提供主题.通过上下文 API，信息向下传递到组件树中，以便每个 child 都可以访问上下文并可以访问包含的信息(在本例中为主题)。按照您建议的方式进行操作，您会受到一些限制:

1. 主题中的任何更改都不会反射(reflect)在您的组件中，因为如果外部值发生更改，它们不会重新呈现。他们只重新渲染属性和状态的变化。 但是正如您所写，您不需要那个。
2. 在每个组件中，如果你想使用你的主题，你必须显式导入它，如果你使用 ThemeProvider 就没有必要；
3. 如果您只想将主题应用于组件树的单个分支，则很难跟踪您可以在何处导入给定主题，在何处不可以。特别是如果您在树的不同分支中重用组件。 但是你说你只想为所有人使用一个主题。
4. 它只是不是惯用的 React 代码，你的代码中至少有一个 WTF? 的风险，这可能会减少你的 code quality .