Files
react-test/docs/data/material/customization/css-layers/CssLayersInput.js
how2ice 005cf56baf
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
init project
2025-12-12 14:26:25 +09:00

44 lines
1.2 KiB
JavaScript

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>
);
}