[Textfield] Using `ThemeProvider` of `@emotion/react` doesn't apply custom theme to border

Hi, i’m trying to customize my textfield to match with our color scheme. However, the colors don’t seem to propagate.

Here’s an example picture of what happens when you set a color via a theme.

The outline should be either the secondary color, or the same as the primary one, or the lighter/darker theme. Definitely not blue!

I cannot override the outlineInput, as that removes the red color from when it errors, all i want is a nice override like how it changes when you do color=secondary.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Outline color is blue

Expected Behavior 🤔

The color should match the selected color theme override

Steps to Reproduce 🕹

Couldn’t get any codesandbox to work with new mui.

here’s my code:

textfield:

          <TextField
            fullWidth
            id="email"
            size='small'
            label="Your email address*"
            {...formik.getFieldProps('email')}
            error={formik.touched.email && Boolean(formik.errors.email)}
            helperText={formik.touched.email && formik.errors.email}
          />

theme override:

export const theme: Theme = createTheme({
  palette: {
    primary: {
      main: '#00bfa5;',
    },
  },
  // components: {
  //   MuiTextField: {
  //     styleOverrides: {
  //       root: {
  //         '& .MuiOutlinedInput-root': {
  //           '&:hover fieldset': {
  //             borderColor: 'rgba(0,0,0,.38);',
  //           },
  //           '&.Mui-focused fieldset': {
  //             borderColor: '#00bfa5;',
  //           },
  //         },
  //       },
  //     },
  //   },
  // },
});

Steps:

1. create a textfield
2. override theme with primary main color
3. observe that the textfield does not pass down the correct color to outlined input

Context 🔦

Trying to make a pretty registration page

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.6
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.50 
    @mui/icons-material: ^5.0.3 => 5.0.3 
    @mui/material: ^5.0.3 => 5.0.3 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/system:  5.0.3 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react: ^17.0.29 => 17.0.29 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.4.4 => 4.4.4 

using brave browser

[mnajdova]

This diff should fix it:

index 5f5c1b4d68..2308413593 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -268,8 +268,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
     ...other
   } = props;

-  const theme = useTheme();
-
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const { current: isControlled } = React.useRef(value != null);

@@ -498,7 +496,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
         {...rootProps}
         {...(!isHostComponent(Root) && {
           ownerState: { ...ownerState, ...rootProps.ownerState },
-          theme,
         })}
         ref={ref}
         onClick={handleClick}
@@ -530,7 +527,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
             {...(!isHostComponent(Input) && {
               as: InputComponent,
               ownerState: { ...ownerState, ...inputProps.ownerState },
-              theme,
             })}
             ref={handleInputRef}
             className={clsx(classes.input, inputProps.className, inputPropsProp.className)}

We should depend on one way for getting the theme, this looks like a one-off pattern for setting the theme via props, I couldn’t find any other usage of this in the material package. We should remove it and double check that everything works as before. @hbjORbj would you like to create a PR and validate this?

[sbitenc]

Do we need to consider ThemeProvider from @emotion/react?

@sbitenc why do you import ThemeProvider from emotion instead of @mui/material/styles?

Hi, @siriwatknp

Sometimes i click the first option on import, other times it automatically import the emotion theme. It would be nice to get a warning out regardless, because it partially works and makes for obscure errors.