Skip to content

Instantly share code, notes, and snippets.

@tomByrer

tomByrer/material-ui-jsdelivr-cdn.htm

Created January 22, 2020 14:12
Show Gist options
  • Save tomByrer/c63164b1e5b6a40edaacd4651ad8869a to your computer and use it in GitHub Desktop.
Save tomByrer/c63164b1e5b6a40edaacd4651ad8869a to your computer and use it in GitHub Desktop.
Download ZIP
React-MUI using jsDelivr CDN for in-browser hydration.
Raw
material-ui-jsdelivr-cdn.htm
<!DOCTYPE html>
<html lang="en">
<head>
<title>My page</title>
<meta charset="utf-8" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.development.js,npm/[email protected]/umd/react-dom.development.js,npm/@material-ui/[email protected]/umd/material-ui.development.js,npm/@babel/[email protected]/babel.min.js" crossorigin="anonymous"></script>
<!-- Seperate Links
src: https://github.com/mui-org/material-ui/blob/master/examples/cdn/index.html -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@material-ui/[email protected]/umd/material-ui.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js" crossorigin="anonymous"></script> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" />
<!-- Icons to support Material Design -->
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {
colors,
CssBaseline,
ThemeProvider,
Typography,
Container,
makeStyles,
createMuiTheme,
Box,
SvgIcon,
Link,
} = MaterialUI;
// Create a theme instance.
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: colors.red.A400,
},
background: {
default: '#fff',
},
},
});
function LightBulbIcon(props) {
return (
<SvgIcon {...props}>
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
</SvgIcon>
);
}
const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(6, 0, 3),
},
lightBulb: {
verticalAlign: 'middle',
marginRight: theme.spacing(1),
},
}));
function ProTip() {
const classes = useStyles();
return (
<Typography className={classes.root} color="textSecondary">
<LightBulbIcon className={classes.lightBulb} />
Pro tip: See more{' '}
<Link href="https://material-ui.com/getting-started/templates/">
templates
</Link>{' '}
on the Material-UI documentation.
</Typography>
);
}
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://material-ui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
function App() {
return (
<Container maxWidth="sm">
<div style={{ marginTop: 24, }}>
<Typography variant="h4" component="h1" gutterBottom>
CDN v4-beta example
</Typography>
<ProTip />
<Copyright />
</div>
</Container>
);
}
ReactDOM.render(
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment