Question

似乎主题只是一个javascript对象。

我们可以在javascript文件中定义主题并在需要时将其导入吗？

那么ThemeProvider使您不必再做manual import吗？

Answer 1

ThemeProvider背后的想法是，它将自动将您在渲染树下创建的主题对象作为道具传递，因此您不必手动执行。

要想更详细地回答您的问题，可以说您想在Web应用程序中提供明暗主题，您可以通过两种方法将主题对象手动传递给基于活动主题样式的组件，或者只需传递一次即可，它将处理所有问题。

这是一个小例子：

const lightTheme = {
  backgroundColor: "#fff",
  color: "#000"
}

const darkTheme = {
  backgroundColor: "#000",
  color: "#fff"
}

const Heading = styled.h1`
  color: ${props => props.theme.color};
` 

export const App = () => {
  const [darkThemeActive, setdarkThemeActive] = useState(false);

  return (
    <ThemeProvider theme={darkThemeActive ? darkTheme : lightTheme}>
      <Heading>Hello world!!</Heading>
      {/* This will override the theme prop thats being passed to the Heading by ThemeProvider */}
      <Heading theme={{color: "green}}>Hello world!!</Heading>
    </ThemeProvider>
  )
}

Emotions.js或样式化组件ThemeProvider提供了什么？

1 个答案: