我可以传递一个prop组件到mui styles()吗?

Question

是否可以将prop组件传递给mui样式的实用程序?

我正在将一个图标组件从父组件传递给子组件，并希望将该图标传递给子组件中的样式组件。

父:

export const ButtonWithIcon = Template.bind({});
ButtonWithIcon.args = {
icon: (
<AddIcon
style={{
color: 'red',
}}
/>
),
};

孩子:

const {
icon,
} = props;
const StyledIcon = styled(icon)(({ theme }) => ({
color: theme.colors.primary
}));

这可能吗?图标是一个组件，但在试图将其传递给样式实用程序

时出现错误

Answer 1

既然这是一个老问题，我希望你得到你的答案。但作为参考，这绝对是可能的。

import React from 'react';
import PropTypes from 'prop-types';
import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import theme from '../../themes/appTheme';
const StyledBox = styled(Box)(({ anyStyling }) => {
// Custom styling
});
export default function SomeWrapper(props) {
const { children, anyStyling } = props;
return <StyledBox {...props}>{children}</StyledBox>;
}
SomeWrapper.propTypes = {
children: PropTypes.node.isRequired,
};