Mui V5: theme override gives unexpected result. Why?

user_10967600 0
Viewed 75

I want to change the border radius of all my input field of my project. For example for the TextField component I want rounded text field instead of squared text field. According to the Mui v5 docs I should set my theme to

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 16
        },
      }
    }
  }
})

If I do this in a sandbox, then this works.

https://codesandbox.io/s/globalthemeoverride-material-demo-forked-iebvrr?file=/demo.tsx:239-384

If I do this in my project, then this does not work.

For a TextField component the div that is impacted is enter image description here

In the sandbox the style sheet associated to that div is

enter image description here

In my project the style sheet associated to that div is

enter image description here

The difference is that the classes MuiOutlinedInput-root and MuiInputBase-root don't appear in the sandbox whereas they do appear in the project. What setting causes these classes to not change the style sheet, and how should I change the theme to get the changed borderRadius in my project too?

material-ui css
1 Answers

You can try adding the shape inside your theme object like:

shape: {
  borderRadius: 16,
}

For example, your theme should look like:

const theme = createTheme({
  shape: {
    borderRadius: 16,
  },
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: 16
        },
      }
    }
  }
})
user_53764040
Related