[Textfield] Border lines of Textfield cross over the text label shrinked by MuiInputLabel

• 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 😯

Borders of Textfield component cross over the shrinked text label.

Expected Behavior 🤔

Border lines overlapping with the shrinked text label are hidden.

Steps to Reproduce 🕹

https://codesandbox.io/s/elegant-leakey-zsflw?file=/src/App.tsx

source code

import {
  createTheme,
  Stack,
  TextField,
  ThemeProvider
} from "@material-ui/core";
import React from "react";

const theme = createTheme({
  components: {
    MuiInputLabel: {
      defaultProps: { shrink: true }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Stack sx={{ m: 5 }} spacing={2}>
        {/*NG*/}
        <TextField label="Abcdefghi" />
        {/*OK*/}
        <TextField label="Abcdefghi" InputLabelProps={{ shrink: true }} />
      </Stack>
    </ThemeProvider>
  );
}

export default App;

Steps:

1. shrink: true is specified in theme.
2. InputLabelProps = {{shrink: true}} is not specified in TextField.

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

my browser: Google Chrome 90.0.4430.212（Official Build）（x86_64）
my pc: macOS Big Sur ver 11.2.2

npx @material-ui/envinfo

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: ^5.0.0-alpha.35 => 5.0.0-alpha.35 
    @material-ui/icons: ^5.0.0-alpha.35 => 5.0.0-alpha.35 
    @material-ui/private-theming:  5.0.0-alpha.35 
    @material-ui/styled-engine:  5.0.0-alpha.34 
    @material-ui/system:  5.0.0-alpha.35 
    @material-ui/types:  6.0.1 
    @material-ui/unstyled:  5.0.0-alpha.35 
    @material-ui/utils:  5.0.0-alpha.35 
    @types/react: ^17.0.8 => 17.0.9 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.1.2 => 4.3.2 

[RobTF]

There is a bug;

If I run my app with no theme overrides, text fields look like this

If I put the following into my theme setup;

    components: {
        MuiFormLabel: {
            styleOverrides: {
                root: {
                    fontSize: 16,
                },
            },
        },
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    fontSize: 12,
                },
            },
        },
    },

It looks like this;

Something, somewhere is not taking into account of the overridden font sizes.

[eps1lon]

Pretty sure this is a general problem when we reach into *Props but ignore theme default props.