Emotions.js 或者 Styled-components ThemeProvider 提供了什么？

Question

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

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

所以 ThemeProvider 让您免于 manual import ?

Answer 1

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

为了更详细地回答您的问题，假设您想在您的网络应用程序中提供深色和浅色主题，您可以通过两种方式实现，或者根据活动主题样式手动将主题对象传递给组件或者你可以只传递一次它会处理所有事情。

这是一个小例子：

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 或者 Styled-components ThemeProvider 提供了什么？

Emotions.js or Styled-components What does ThemeProvider provides?

emotion

styled-components