[使用样式化组件时出现PropTypes错误

Question

[我在我也使用material-ui的React应用程序（使用create-react-app创建）中使用样式化组件时遇到一些麻烦。

我是样式组件的新手，所以我试图根据另一个material-ui组件对一个material-ui组件进行样式设置，该组件位于一个styled-component内部。为了阐明我要做什么，下面是代码：

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

您能帮我解决这个问题吗？

谢谢！

Answer 1

如果被引用的组件是样式组件，则只能引用另一个组件内部的组件。从docs：

仅在样式化组件的上下文中支持此行为：在以下示例中尝试安装B将失败，因为组件A是React.Component的实例，而不是样式化组件。

引发错误-无法将类作为函数调用，因为样式化的组件试图将其作为内插函数调用。

但是，将A封装在styled（）工厂中使其可以进行插值-只需确保所封装的组件沿className传递即可。

即：

const StyledFormControl = styled(FormControl);

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