在单独的样式表中使用 ThemeProvider

Question

我一直在尝试将样式组件中的 ThemeProvider 集成到现有项目中。但是运行在访问主题的样式时出现以下错误 sheet:

TypeError: Cannot read properties of undefined (reading 'sidebarImage')
  10 |     315deg,
  11 |     ${p => p.bgColor1} 0%,
  12 |     ${p => p.bgColor2} 74%),
> 13 |     url(${(props) => props.theme.images.sidebarImage});
     | ^  14 |     
  15 | background-size: cover;
  16 | background-repeat: no-repeat;

经过一番摸索，我找到了问题的根源。在我一直关注的 tutorial 中，所有带样式的组件都定义在与使用它的组件相同的文件中（即 Container 定义在 App.js)。在我正在处理的项目中，所有样式组件都以单独的样式 sheets 定义（因此 Container 将在 App.styles.js 然后导入到 App.js).

将带样式的组件从 App.styles.js 移动到 App.js 可以解决此问题。但是，是否可以让样式 sheets 访问 Themeprovider？

Answer 1

一旦我找到了问题的根源，就很容易解决了。使用答案我已经制定了这个解决方案（尽管可能有更好的方法）。

import { useTheme } from "styled-components";

...

const Sidebar = (props) => {
    const theme = useTheme();

    ...

    return (
        <s.SidebarContainer theme={theme}
                            isSidebarOpen={isSidebarOpen}>
            
            <s.SidebarHeader theme={theme}>
                {sidebarHeader}
            </s.SidebarHeader>
        </s.SidebarContainer>
    )

在单独的样式表中使用 ThemeProvider

Using ThemeProvider in separate style sheets

javascript

reactjs

styled-components

themeprovider