[TextField] `InputLabelProps={{ required: true }}` renders incorrectly

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The asterisk used for required TextField components renders differently if using InputLabelProps={{ required: true }} to using required. The former is useful if you want to roll your own validation.

It's subtle but the spacing to the right of the asterisk is missing on the second TextField.

So this is OK:

<TextField required />

This has the missing spacing:

<TextField InputLabelProps={{ required: true }} />

Expected behavior 🤔

Using required or InputLabelProps={{ required: true }} should render the asterisk consistently.

Steps to reproduce 🕹

https://codesandbox.io/s/clever-frost-fy71ov?file=/src/App.tsx

Context 🔦

No response

Your environment 🌎

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.5.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.8.2 => 11.8.2 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.71 
    @mui/material: ^5.5.0 => 5.5.0 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/system:  5.5.0 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @types/react: ^17.0.33 => 17.0.40 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.4 => 4.6.2 

Start by reproducing the discrepancy in the linked CodeSandbox, comparing TextField required with InputLabelProps={{ required: true }}. Trace the TextField and InputLabel rendering paths to find where the asterisk spacing differs. Done means both forms render the required asterisk consistently.