I am looking to adjust the border radius of all input fields in my project. Specifically, I would like the TextField component to have a border radius of https://i.stack.imgur.com/ULEGj.png instead of https://i.stack.imgur.com/NWmUe.png. According to the Mui v5 documentation, I need to configure my theme as follows:
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: 16
},
}
}
}
})
If I implement this in a sandbox environment, it functions properly.
https://codesandbox.io/s/globalthemeoverride-material-demo-forked-iebvrr?file=/demo.tsx:239-384
However, when I apply this configuration in my actual project, it does not yield the desired outcome.
Upon inspecting the impacted TextField component's div,
In the sandbox, the associated style sheet for that div is
https://i.stack.imgur.com/rJscE.png
Whereas in my project, the associated style sheet shows
https://i.stack.imgur.com/bmxg3.png
The disparity lies in the absence of classes MuiOutlinedInput-root and MuiInputBase-root in the sandbox compared to their presence in the actual project. I am seeking guidance on which setting prevents these classes from modifying the style sheet, and how to adjust the theme to achieve the desired changed borderRadius in my project as well.