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

Question

我在 React 应用程序（使用 create-react-app 创建）中使用 styled-components 时遇到一些问题，我还使用 material-ui.

我是 styled-components 的菜鸟，所以我试图根据另一个 material-ui 组件来设计 styled-component 内的 material-ui 组件的样式。为了阐明我想做什么，这里是代码：

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

其中 Container 和 FormControl 确实是 material-ui 个组件。

现在我知道我不应该在 parents 中设置 children 样式，但正如我所说，我只是在练习。

当我这样做并使用 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
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:

This behaviour is only supported within the context of Styled Components: attempting to mount B in the following example will fail because component A is an instance of React.Component not a Styled Component.

The error thrown - Cannot call a class as a function - occurs because the styled component is attempting to call the component as an interpolation function.

However, wrapping A in a styled() factory makes it eligible for interpolation -- just make sure the wrapped component passes along className.

即：

const StyledFormControl = styled(FormControl);

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

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

PropTypes error when using Styled Components

reactjs

material-ui

react-proptypes

styled-components