Почему стилизованные компоненты создают объект? - PullRequest
Новая
       126

Почему стилизованные компоненты создают объект?

0 голосов
/ 13 июля 2020

У меня есть очень простой c код, который использует стилизованные компоненты: 

import styled from 'styled-components';

const Test = () => <div>foo</div>;
const StyledTest = styled(Test)`
  border: 10px solid red;
`;
console.log(typeof StyledTest); // object!!!

Проблема в том, что последние console.log строковые журналы object (НЕ function), что, конечно, вызывает ошибку, когда я пытаюсь его использовать.

Это также происходит, когда я пытаюсь стилизовать компонент из библиотеки: 

import Modal from 'react-modal';
const StyledModal = styled(ReactModalAdapter)`
  border: 10px solid red;
`;
console.log(typeof StyledModal); // object!!!

Что я делаю не так?

1 Ответ

3 голосов
/ 15 июля 2020

console.log элемента стилизованного компонента всегда будет object.

Чтобы ваш код работал правильно, вам нужно изменить StyledTest на: 

const StyledTest = styled.div`
  border: 10px solid red;
`;

и используйте это в Test: 

const Test = () => <StyledTest>foo</StyledTest>;

Сначала вам нужно стилизовать, а затем применить то, что вы создаете.

Чтобы создать, как вы, параметр, который вы передаете в StyledTest должен быть компонентом стиля, поэтому, если у вас есть что-то вроде: 

const Test = styled(({ ...rest }) => <div {...rest} />)`
  border: 10px solid red;
`;

const StyledTest = styled(Test)`
  border: 10px solid blue;
`;

В этом примере Test - это элемент стилизованного компонента, поэтому вы можете его отредактировать.

...