自动完成反应选择不良样式

Question

我在我的react js网站上使用https://www.googleapis.com/oauth2/v3/userinfo自动完成组件。我只是将示例react-select中的示例代码复制到了表格单元格中，但无法正常工作，如下图所示。

link

但是，它可以单独正常运行。请帮我解决这个问题。这是代码。

Autocomplete.jsx与上面的链接中的代码相同。

...    
import Autocomplete from './Autocomplete.jsx';
...
const useStyles = makeStyles(theme => ({
    textField: {
        padding: theme.spacing(),
        width: '100%',
    },
}));
...
export default function Mapping(props) {
    const classes = useStyles();
    ...
    return (
            <TableRow>
                <TableCell>
                    <TextField
                        required
                        id='outlined-required'
                        label='URL pattern'
                        variant='outlined'
                        value={name}
                        onChange={event => setName(event.target.value)}
                        className={classes.textField}
                    />
                </TableCell>
                <TableCell>
                    <Autocomplete arn={arn} setArn={setArn} />
                </TableCell>
                {resource.editable ?
                    <TableCell>
                        <Button onClick={saveResource}>Save</Button>
                        <Button onClick={cancel}>Cancel</Button>
                    </TableCell>
                    :
                    <TableCell>
                        <Button onClick={addResource}>Add</Button>
                    </TableCell>
                }
            </TableRow>
        );
}

================================================ ========================

...
import Mapping from './Mapping.jsx';
...
const useStyles = makeStyles(theme => ({
    root: {
        paddingBottom: theme.spacing(),
        paddingTop: theme.spacing(),
        width: '100%',
        marginTop: theme.spacing(),
    },
    mappingsWrapper: {
        padding: theme.spacing(),
        borderRight: '#c4c4c4',
        borderRightStyle: 'solid',
        borderRightWidth: 'thin',
    },
    mappingsHeading: {
        display: 'flex',
        alignItems: 'center',
    },
    mappingsTitle: {
        paddingLeft: theme.spacing(),
        fontSize: '1rem',
        paddingTop: theme.spacing(),
        paddingBottom: theme.spacing(),
    },
}));
...
export default function Mappings() {
    const classes = useStyles();
    ...
    return (
        <Paper className={classes.root}>
            <Grid container item xs={12}>
                <Grid xs className={classes.mappingsWrapper}>
                    <div className={classes.mappingsHeading}>
                        <Typography className={classes.mappingsTitle}>
                            Mappings
                        </Typography>
                    </div>
                    <Table stickyHeader>
                        <TableHead>
                            <TableRow>
                                {columns.map(column => (
                                    <TableCell
                                        key={column.id}
                                        align={column.align}
                                        style={{ minWidth: column.minWidth }}
                                    >
                                        {column.label}
                                    </TableCell>
                                ))}
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {resources.map((resource) => {
                                if (resource.editable) {
                                    return (
                                        <Mapping
                                            resource={resource}
                                            resources={resources}
                                            setResources={setResources}
                                        />
                                    );
                                } else {
                                    return (
                                        <TableRow>
                                            <TableCell>{resource.name}</TableCell>
                                            <TableCell>{resource.arn}</TableCell>
                                            <TableCell>
                                                <Button onClick={() => editResource(resource)}>Edit</Button>
                                                <Button onClick={() => deleteResource(resource)}>Delete</Button>
                                            </TableCell>
                                        </TableRow>
                                    );
                                }
                            })}
                            <Mapping
                                resource={{ name: '', arn: '', editable: false }}
                                resources={resources}
                                setResources={setResources}
                            />
                        </TableBody>
                    </Table>
                </Grid>
            </Grid>
        </Paper>
    );
}