Styling issues when configuring next.js with Styled Components & Material UI.

[Inayat-C]

Hi guys,

I've ran across an issue trying to set up my next project with styled components and material ui.

You can check out the code here: https://codesandbox.io/s/compassionate-leakey-ghqft?file=/pages/_app.js

If you click on one of the inputs, you'll see that materials default styling on the label is a little off, however in _app.js, when you remove from line 44 and refresh the browser, the styling is back to normal!

Anyone know what's going on? Is this a bug or am i doing something wrong? Thanks!

[jamesmosier]

The issue is due to applying this styling to spans:

p,
li,
span, /* <-- this is the problem */
a,
button,
input,
select,
textarea {
    font-size: 1rem; /* <-- this is the problem */
    line-height: 1.5;
    color: #323232;
}

if you change that to this:

p,
li,
a,
button,
input,
select,
textarea {
    font-size: 1rem;
    line-height: 1.5;
    color: #323232;
}

it works.

The reason is because that span { font-size: 1rem; } is increasing the size of this accessibility span that material-ui creates. Normally that span is 12px but by increasing the size of this span it causes the issue when the material-ui label moves to the top of the input.