Ошибка PropTypes при использовании Styled Components - PullRequest
Новая
       29

Ошибка PropTypes при использовании Styled Components

0 голосов
/ 14 апреля 2020

У меня возникли проблемы с использованием стилевых компонентов в приложении React (созданном с помощью приложения create-реакции-приложения), где я также использую material-ui.

Я - нуб ie в стиле -компоненты, поэтому я пытался стилизовать компонент material-ui, который находится внутри компонента styleled, на основе другого компонента material-ui. Чтобы уточнить, что я пытался сделать, вот код: 

const StyledContainer = styled(Container)`          
    background-color: ${props=>props.theme.defaultBackground};
    ${FormControl} {
        width:100%;
      }
`;

Где Container и FormControl действительно являются компонентами Material-UI.

Теперь я знаю, что я не должен стилизовать дети у родителей, но, как я уже сказал, я просто тренируюсь.

Когда я делаю это и использую StyleContainer, я получаю ошибку PropType: 

Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at ...

, когда это стек след: 

checkType
node_modules/prop-types/factoryWithTypeCheckers.js:181
flatten
http://localhost:3000/static/js/0.chunk.js:226001:21
ComponentStyle.generateAndInjectStyles
http://localhost:3000/static/js/0.chunk.js:226243:27
useInjectedStyle
http://localhost:3000/static/js/0.chunk.js:226460:120
useStyledComponentImpl
http://localhost:3000/static/js/0.chunk.js:226488:28
Styled(WithStyles(ForwardRef(Container)))
http://localhost:3000/static/js/0.chunk.js:226555:12
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js:14803
updateForwardRef
node_modules/react-dom/cjs/react-dom.development.js:16816
beginWork
node_modules/react-dom/cjs/react-dom.development.js:18645
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:188
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:237
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:292
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:23203
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:22154
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:22130
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:21756
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21188
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:24373
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:24758
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:21903
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:24757
render
node_modules/react-dom/cjs/react-dom.development.js:24840

Можете ли вы помочь мне разобраться в этом!

Спасибо!

1 Ответ

1 голос
/ 14 апреля 2020

Вы можете ссылаться на компоненты внутри другого, только если упомянутый компонент является стилизованным компонентом. Из документов :

Это поведение поддерживается только в контексте стилизованных компонентов: попытка монтировать B в следующем примере не удастся, поскольку компонент A является экземпляром React. Компонент, а не стилизованный компонент.

Возникла ошибка - Невозможно вызвать класс как функцию - возникает из-за того, что стилизованный компонент пытается вызвать компонент как функцию интерполяции.

Однако перенос A в фабрике styled () он допускает интерполяцию - просто убедитесь, что обернутый компонент проходит по className.

То есть: 

const StyledFormControl = styled(FormControl);

const StyledContainer = styled(Container)`          
    background-color: ${props=>props.theme.defaultBackground};
    ${StyledFormControl} {
      width:100%;
    }
`;
...