Как использовать styled-компоненты, которые выходят из уже стилизованного компонента?

Question

Я пытаюсь извлечь все мои стили стилей с помощью styled-component в один файл.

Однако я сталкиваюсь с ошибкой, из-за которой, если я извлекаю стиль и компонент, для которого стиль используется, в отдельный файл, темы перестают работать.

Button.jsx

import {ButtonWrapper} from './Button.styled';
import {Button as MUButton} from '@material-ui/core/Button';

export const Button = () => {
  return <ButtonWrapper>
    <Button/>
  </ButtonWrapper>
}

SmallButton.jsx

import {StyledSmallButton} from './Button.styled';

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

// const StyledSmallButton = styled(Button)` // This works.
//   width: 50%
// `

export const SmallButton = () => {
  return <StyledSmallButton/>
}

Button.styled.jsx

import {Button} from './Button';

export const ButtonWrapper = styled.div`
  width: 100%
`;

export const StyledSmallButton = styled(Button)` //Doesn't work.
  width: 50%
`;

Ошибка

Uncaught Error: Cannot create styled-component for component: undefined

Я полагаю, что здесь есть проблема циклической c зависимости, то есть SmallButton требует Button, которая тематизируется ButtonWrapper. Как я могу решить это?

Answer 1

Я думаю, вы неправильно импортировали кнопку MUB. Должен ли <Button /> компонент на самом деле быть <MUButton />?

import {ButtonWrapper} from './Button.styled';
import {Button as MUButton} from '@material-ui/core/Button';
                 // ^ this is the alias

export const Button = ({ className }) => {
  return <ButtonWrapper>
    <MUButton className={className} />
     // ^ This should be MUButton
  </ButtonWrapper>
}

Редактировать: передал реквизит className, как упомянул Энди в комментариях