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

似乎主题只是一个javascript对象

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

---

因此，

ThemeProvider

使您无需手动导入

？
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>
  )
}

const lightTheme={
背景颜色：“fff”，
颜色：“000”
}
常数暗色={
背景色：“000”，
颜色：“fff”
}
const Heading=styled.h1`
颜色：${props=>props.theme.color}；
` 
导出常量应用=（）=>{
常数[darkThemeActive，setdarkThemeActive]=使用状态（false）；
返回(
你好，世界！！
{/*这将覆盖ThemeProvider传递给标题的主题道具*/}
在此基础上，情感的主题化只是反应上下文；它实际上并没有在上面做任何事情。直接使用它而不是反应上下文的好处是情感运作的更快捷方式，这导致情感在父母和孩子之间插入他们自己的上下文提供者和消费者（典型的高阶组件，但是在你传递
css
prop的任何东西周围）。因为情感已经在这样做了，所以携带主题是最小的额外工作。