Material UI - Theme is overriding the wrong component

I've made two Material-UI components. Both are using themes. However, the overrides on one theme are being used in the other! I'm losing my mind trying to find a solution to this. Here is the code:

This is being used for component1:

const themeForComponent1 = createMuiTheme({    overrides: {      MuiInputLabel: {        root: {          padding: '13px 0 0 13px !important'        }      },    },  })  

...and it is changing stuff in component 2, which happens to also have an element with the class "MuiInputLabel-root".

(edit: If it helps at all, the component is being called in Formik using the Field element via the "as" prop. Each component is using its own ThemeProvider element.)

https://stackoverflow.com/questions/67040740/material-ui-theme-is-overriding-the-wrong-component April 11, 2021 at 09:39AM