Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
import FormHelperText from '@mui/material/FormHelperText';
|
|
|
|
const theme = createTheme({
|
|
modularCssLayers: true,
|
|
cssVariables: true,
|
|
});
|
|
|
|
export default function CssLayersInput() {
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<FormControl variant="outlined">
|
|
<InputLabel
|
|
shrink
|
|
htmlFor="css-layers-input"
|
|
sx={{
|
|
width: 'fit-content',
|
|
transform: 'none',
|
|
position: 'relative',
|
|
mb: 0.25,
|
|
fontWeight: 'medium',
|
|
pointerEvents: 'auto',
|
|
}}
|
|
>
|
|
Label
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
id="css-layers-input"
|
|
placeholder="Type something"
|
|
slotProps={{
|
|
input: {
|
|
sx: { py: 1.5, height: '2.5rem', boxSizing: 'border-box' },
|
|
},
|
|
}}
|
|
/>
|
|
<FormHelperText sx={{ marginLeft: 0 }}>Helper text goes here</FormHelperText>
|
|
</FormControl>
|
|
</ThemeProvider>
|
|
);
|
|
}
|