Progressive Web App built with Vite + React using Material UI

Default theme object can be customized:

• https://mui.com/material-ui/customization/theming/
• https://mui.com/material-ui/customization/default-theme/

const theme = createTheme({
----typography: {
--------fontFamily: 'Poppins, sans-serif',
----},
----palette: {
--------common: {
------------white: 'hsl(0, 0%, 100%)',
--------},
--------primary: {
------------main: 'hsl(259, 100%, 65%)',
------------hover: 'hsl(0, 0%, 8%)',
--------},
--------error: {
------------main: 'hsl(0, 100%, 67%)',
--------},
--------background: {
------------default: 'hsl(0, 0%, 94%)',
--------},
----},
})

The onInvalid and onInput events have event.target.validationMessage which can be used like help text.

const validate = (event) => {
----console.log(event.target.validationMessage)
}

return (
----<TextField
--------onInput={validate}
--------//...
----/>
)