Question

我刚刚进入styled-components，但遇到了一些问题。我正在尝试通过不同的文件扩展button，由于某种原因，它会导入为undefined

此错误最初与NavLink组件一起出现，导致人们认为这可能是一个反应问题，但在styled.a``;上也会发生，因此我认为并非如此。

StyledComponents.jsx

import styled from 'styled-components';

export const Button = styled.a`
  // general styling
`;

App.jsx

import { Button } from './StyledComponents/StyledComponents';

console.log(Button); // this works fine

export const MainButton = styled(Button)`
  // a little color and other styles
`;

Banner.jsx

import { MainButton } from '../App';

console.log(MainButton); // returns undefined

// if I omit the console logging above, this gives error of undefined
const _MainButton = styled(MainButton)`
  // specific styles for this component
`;

我不太确定发生了什么。我也不确定这是否是层叠这些样式化组件的正确方法。如果有人可以分享一些见识，将不胜感激！

Answer 1

好吧，这种出口卷积就是问题所在。您要将按钮从StyledComponents.jsx导入到App.jsx中，然后将其导出为MainButton，然后再次导入到Banner.jsx中，后者在{{1}中呈现}，在LandingPage中呈现。 ew。我实际上只是通过移动App.jsx定义并导出到另一个文件来解决此问题。我不确定为什么，但是那是事实。将样式化的组件保存在专用文件中是一个好主意！例如，将MainButton移动到另一个文件：

/StyledComponents/StyledComponents.jsx

MainButton

然后更改导入：

Banner.jsx

export const MainButton = styled(Button)`
    //styles go here
`;

工作正常！

但是，一般来说，如果您想使用样式化组件对内容进行分层，我希望将其保存在单个文件中。如果不需要全部，则不必全部导出，但是您也可以：

import { MainButton } from '../StyledComponents/StyledComponents';

只需确保它们井然有序。您不能在const TitleBase = styled.h1` text-transform:uppercase; font-size: 1rem; `; export const GreenTitle = styled(Title)` color: green; `; export const RedTitle = styled(Title)` color:red; `;之后定义Title，例如

一个小提示：也可以使用RedTitle扩展名代替.js，但是您可以随意做任何想做的事！

样式化组件导入导致未定义

1 个答案: