Outlined textfield border label cutoff when centering a div

[Codetalker777]

When

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

The outlined text field has a gap in the middle of the text field with the border over the word

Expected Behavior 🤔

The outlined text field border should have a gap in the border where the text is at the top

Steps to Reproduce 🕹

Steps:

1. https://codesandbox.io/s/strange-golick-1tqqw?file=/src/Demo.js

Context 🔦

Your Environment 🌎

Tech	Version

| Material-UI | v4.11.0 |
| React | 16.13.1 |
| Browser | Chrome |
| TypeScript | 3.9.5 |
| etc. | |

[oliviertassinari]

@Codetalker777 Thanks for raising and the reproduction. What do you think of this fix?

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 638a936f2..4f0279d91 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -9,6 +9,7 @@ export const styles = theme => {
   return {
     /* Styles applied to the root element. */
     root: {
+      textAlign: 'left',
       position: 'absolute',
       bottom: 0,
       right: 0,
@@ -24,7 +25,6 @@ export const styles = theme => {
     },
     /* Styles applied to the legend element when `labelWidth` is provided. */
     legend: {
-      textAlign: 'left',
       padding: 0,
       lineHeight: '11px', // sync with `height` in `legend` styles
       transition: theme.transitions.create('width', {
@@ -36,7 +36,6 @@ export const styles = theme => {
     legendLabelled: {
       display: 'block',
       width: 'auto',
-      textAlign: 'left',
       padding: 0,
       height: 11, // sync with `lineHeight` in `legend` styles
       fontSize: '0.75em',

Do you want to work on a pull request? :)

[Codetalker777]

Sure I can handle this PR :)

[Codetalker777]

@Codetalker777 Thanks for raising and the reproduction. What do you think of this fix?

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 638a936f2..4f0279d91 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -9,6 +9,7 @@ export const styles = theme => {
   return {
     /* Styles applied to the root element. */
     root: {
+      textAlign: 'left',
       position: 'absolute',
       bottom: 0,
       right: 0,
@@ -24,7 +25,6 @@ export const styles = theme => {
     },
     /* Styles applied to the legend element when `labelWidth` is provided. */
     legend: {
-      textAlign: 'left',
       padding: 0,
       lineHeight: '11px', // sync with `height` in `legend` styles
       transition: theme.transitions.create('width', {
@@ -36,7 +36,6 @@ export const styles = theme => {
     legendLabelled: {
       display: 'block',
       width: 'auto',
-      textAlign: 'left',
       padding: 0,
       height: 11, // sync with `lineHeight` in `legend` styles
       fontSize: '0.75em',

Do you want to work on a pull request? :)

Looks like good fix to me!

[Codetalker777]

pull request #21665