Material Ui CDN Example - React Js
Material Ui CDN Example | Mui CDN - React Js:In React, you can leverage Material-UI, a popular design library, via a Content Delivery Network (CDN). To do this, embed essential scripts and styles directly from remote servers into your HTML. Start by including React and React DOM libraries to enable React functionality. Then, link to Material-UI's style sheet for its modern design aesthetics. Finally, import Material-UI components through script tags. This CDN approach eliminates the need for local installations, making it easier to create React applications with Material-UI's pre-styled components and adhere to Material Design principles, promoting efficient, visually appealing web development.
Thanks for your feedback!
Your contributions will help us to improve service.
Material Ui CDN/Mui CDN Example - React Js
<html lang="en"> <head> <title>My page</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, width=device-width" /> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous" ></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous" ></script> <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js" crossorigin="anonymous" ></script> <!-- Fonts to support Material Design --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;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, createTheme, Box, SvgIcon, Link, } = MaterialUI; // Create a theme instance. const theme = createTheme({ palette: { primary: { main: '#556cd6', }, secondary: { main: '#19857b', }, error: { main: colors.red.A400, }, }, }); 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> ); } function ProTip() { return ( <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary"> <LightBulbIcon sx={{ mr: 1, verticalAlign: 'top' }} /> Pro tip: See more{' '} <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link> in the MUI documentation. </Typography> ); } function Copyright() { return ( <Typography variant="body2" color="text.secondary" align="center"> {'Copyright © '} <Link color="inherit" href="https://mui.com/"> Your Website </Link>{' '} {new Date().getFullYear()} {'.'} </Typography> ); } function App() { return ( <Container maxWidth="sm"> <Box sx={{ my: 4 }}> <Typography variant="h4" component="h1" gutterBottom> Material UI CDN example </Typography> <ProTip /> <Copyright /> </Box> </Container> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <ThemeProvider theme={theme}> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} <CssBaseline /> <App /> </ThemeProvider>, ); </script> </body></html>Output of Material UI CDN Example - React Js
