My form utilizes MUI Form within a Dialog, but I am facing an issue where the TextField always displays with the border of a filled variant instead of the standard look. Additionally, when trying to integrate an Input from the NextUi library, I encountered difficulty removing a box within the Input that seems to be enforced by global MUI styles. Every TextField on my website exhibits this behavior, including the Autocomplete component. Could this be due to the impact of global MUI styles? I have attempted various styling overrides without success.
The below code snippet shows the Form (extracted from MUI docs) with the problematic Standard TextField:
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
export default function AddInfoForm() {
return (
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
<TextField id="filled-basic" label="Filled" variant="filled" />
<TextField id="standard-basic" label="Standard" variant="standard" />
</Box>
);
}
Here's the component containing the above Form code:
// Code block representing the component structure mentioned in the preceding section
// Styling classes and functions included for reference
This snippet represents the index.js file wrapping my application:
// Code block demonstrating the setup of the main application flow, theme configuration, providers, etc.
Visual representation of the current form layout can be seen below:
Any assistance or guidance offered would be highly appreciated! Various attempts were made to address the styling inconsistencies, including inline styles, overrides, makeStyles, CssBaseline usage, commenting out the NextUi provider, and adjusting the main theme, all of which yielded no desired results.