const MyThemeComponent = styled('div', {
// Configure which props should be forwarded on DOM
shouldForwardProp: (prop) =>
prop !== 'color' && prop !== 'variant' && prop !== 'sx',
name: 'MyThemeComponent',
slot: 'Root',
// We are specifying here how the styleOverrides are being applied based on props
overridesResolver: (props, styles) => [
styles.root,
props.color === 'primary' && styles.primary,
props.color === 'secondary' && styles.secondary,
],
})(({ theme }) => ({
backgroundColor: 'aliceblue',
padding: theme.spacing(1),
}));任何人都可以解释什么shouldForwardProp做什么？实际上我正在努力理解这段代码
shouldForwardProp: (prop) =>
prop !== 'color' && prop !== 'variant' && prop !== 'sx',
1条答案
按热度按时间9bfwbjaz1#
简而言之，它会问 “您是否希望在
<MyThemeComponent />的示例上设置的color、variant和sx属性也在您正在进行样式化的底层div元素上设置？"。在这种情况下，答案可能是 “no”，因为这三个属性不是
div上的有效属性。由于styled组件默认将传递给它的任何属性“转发”到其底层元素/组件，shouldForwardProps函数可以过滤掉不想传递的属性。NOT**color、variant或sx，然后（“是”）将它们作为属性放在div上。”在这个示例图像中，您可以看到我注解掉了
prop !== color行，并且color属性作为属性传递给了底层div，而variant和sx没有被传递：