Question

我的目标是在jsfiddle或codepen之类的系统中使用，因此我需要CDN；

下面的代码段，显然对于CDN，我不得不替换import语句。

import React from 'react';
import IconButton from '@material-ui/core/IconButton';

import DeleteIcon from '@material-ui/icons/Delete'; // ** HOW TO USE THESE FROM CDN ?!** 
import AlarmIcon from '@material-ui/icons/Alarm';
import MenuIcon from '@material-ui/icons/Menu';

export default function MyApp() {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar>
                    <IconButton className={classes.menuButton} aria-label="hamburger menu">
                        <MenuIcon />
                    </IconButton>

                    <Typography>
                        Lorem Ipsum...
                    </Typography>
                </Toolbar>
            </AppBar>
        </div>
    );
}

MUI网站/官方文档中有关于CDN使用的部分

https://material-ui.com/getting-started/installation/

这有助于我从核心库中导入，而且我知道该怎么做；它没有告诉我的是如何获取等效语句来替换

import DeleteIcon from '@material-ui/icons/Delete'; // ** HOW TO USE THESE FROM CDN ?!** 
import AlarmIcon from '@material-ui/icons/Alarm';
import MenuIcon from '@material-ui/icons/Menu';

，这样我就可以写

<IconButton >
    <DeleteIcon />
 </IconButton >

<IconButton >
    <AlarmIcon />
 </IconButton >

<IconButton >
    <MenuIcon />
 </IconButton >

如何使用CDN中的Material-UI IconButton（和图标）？

0 个答案: