Material ui via cdn broken TextField #46545
Description
Steps to reproduce
Link: Test
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React + MUI Input and Button</title>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<!-- Fonts to support Material Design -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@latest",
"react-dom": "https://esm.sh/react-dom@latest",
"react-dom/client": "https://esm.sh/react-dom@latest/client",
"react/jsx-runtime": "https://esm.sh/react@latest/jsx-runtime",
"@mui/material": "https://esm.sh/@mui/material@latest?external=react,react-dom",
"@mui/icons-material": "https://esm.sh/@mui/icons-material@latest"
}
}
</script>
</head>
<body>
<div id="root"></div>
<!-- Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- React + MUI app -->
<script type="text/babel" data-type="module">
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import {
TextField,
Button,
Container,
Box,
CssBaseline,
ThemeProvider,
createTheme,
} from '@mui/material';
import { Send } from '@mui/icons-material';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
},
});
function App() {
const [inputValue, setInputValue] = useState('');
const handleClick = () => {
alert('You entered: ' + inputValue);
};
return (
<Container maxWidth="xs" sx={{ mt: 6 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<TextField
label="Enter something"
variant="outlined"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
fullWidth
size="small"
/>
<Button variant="contained" onClick={handleClick}>
<Send sx={{ mr: 1 }} /> Submit
</Button>
</Box>
</Container>
);
}
const root = createRoot(document.getElementById('root'));
root.render(
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>,
);
</script>
</body>
</html>Current behavior
Expected behavior
Context
I took the example code from the link below, which is found on Material UI.
The TextField input component seems to be broken (see label).
Your environment
No response
Search keywords: Material ui via cdn broken TextField