1

我一直在尝试将 ThemeProvider 从 styled-components 集成到现有项目中。但是在样式表中访问主题项时遇到以下错误：

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;

在摆弄了一下之后，我找到了问题的根源。在我一直关注的教程中，所有样式化的组件都定义在与使用它的组件相同的文件中（即Container在App.js中定义）。在我正在处理的项目中，所有样式组件都在单独的样式表中定义（因此Container将位于App.styles.js中，然后将其导入App.js）。

将样式化组件从 App.styles.js 移动到 App.js 解决了这个问题。但是，是否可以让样式表访问 Themeprovider？

4

1 回答 1

0

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

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>
    )
于 2021-12-30T13:52:58.947 回答