您可以传递不同的 Material-ui 图标作为道具吗？

Question

我想知道如何添加不同的图标？这是我目前所拥有的，但图标没有显示在我的 UI?

我的道具认为可行

当我添加 Facebook 按钮时，它的显示方式与我添加的按钮不同

const Item = ({ name = 'Item Name', tags = [] }, icon) => {
  return (
    <Grid item xs={12} spacing={2}>
      <Paper elevation={6}>
        <Grid container justifyContent="flex-start" spacing={3}>
          <Grid item xs={12}>
            {/*Notice the name is in {} since it is a variable*/}
            <h1>{name}</h1>
            {icon}
            <div>{icon}</div>
          </Grid>
          <Grid item>
            {tags.map((tag, idx) => {
              return <Chip key={idx} label={tag} color={'secondary'} />;
            })}
          </Grid>

          <Grid item>
            <Button endIcon={<FacebookIcon />} color="primary" variant="contained">
              Button 1
            </Button>
            <Button color="secondary" variant="contained">
              Button 2
            </Button>
          </Grid>
        </Grid>
      </Paper>
    </Grid>
  );
};

const MyView = () => {
  return (
    <Widget>
      <Grid container spacing={4}>
        <Item icon={<FacebookIcon />} name={jsonData.name} tags={jsonData.tags} />
        <Item name="test paper" tag={'chip2'}></Item>
        <Item name={jsonData.name} tags={jsonData.tags} />
      </Grid>
    </Widget>
  );
};

export default MyView;

Answer 1

你错了 const Item = ({name="Item Name", tags=[],icon} ) => { 您必须从 props 对象而不是参数导入图标。你应该注意到 Item 没有像带参数的函数那样使用，它是一个反应组件：

import FacebookOutlinedIcon from '@mui/icons-material/FacebookOutlined';
const Item = ({name="Item Name", tags=[],icon} ) => {
    return (
        <>


            <Grid item xs={12} spacing={2}>
                <Paper elevation={6}>
                    <Grid container justifyContent="flex-start" spacing={3}>

                        <Grid item xs={12}>
                            {/*Notice the name is in {} since it is a variable*/}
                            <h1>{name}</h1>
                            {icon}
                            <div>{icon}</div>
                        </Grid>


                    </Grid>
                </Paper>

            </Grid>

        </>
    )
}

const Add = (props) => {

    return (
                <Item icon={<FacebookOutlinedIcon/>} name="test" tags={[]}/>
    );
};

export default Add;

您可以传递不同的 Material-ui 图标作为道具吗？

Can you pass different Material-ui icons as props?

reactjs

material-ui

react-props