импорт стилевого компонента не определен

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, который отображается в LandingPage, который отображается в App.jsx,Уф.Я буквально решил эту проблему, просто переместив определение MainButton и экспортировав его в другой файл.Я не уверен почему, но это то, что было.Хранить стилизованные компоненты в выделенных файлах - хорошая идея!Например, перемещая MainButton в другой файл:

/ StyledComponents / StyledComponents.jsx

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

И затем изменив импорт:

Banner.jsx

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

работает просто отлично!

В общем, хотя, если вы хотите наложить материал с помощью styled-компонентов, я хотел бы сохранитьэто в одном файле.Вам не нужно экспортировать их все, если они вам не нужны, но вы также можете:

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 вместо .jsx, но вы можете делать все, что захотите!