[TextField][material-ui] Standard variant styles rendering incorrectly in Next.js app dir

[Matt-roki]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/github/mj12albert/nextjs-rsc-standard-textfield/main?file=%2Fsrc%2Fapp%2Fpage.tsx%3A7%2C1

1. Disable JS
2. Observe the style tags being rendered inside the component

On initial load the textfield standard has the border half way through the input.

<TextField id="standard-basic" label="Standard" variant="standard" />

On load:

After load:

This is the full code of the component

import { TextField } from '@mui/material' const ContactForm = () => { return( <section > <TextField id="standard-basic" label="Standard" variant="standard" /> </section> ) } export default ContactForm

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Im using nextjs 13.5.2 with the latest version of MUI

[NmN03jain]

i want to work on this issue

[mj12albert]

The root cause is that on the server style tags are rendered inside the markup which conflicts with this particular style

'label + &': {
  marginTop: 16,
},

It could be possible to use a different CSS selector that could handle this edge case, are you interested in investigating this further? @NmN03jain

[NmN03jain]

@mj12albert Ok I'll try

[mj12albert]

Thanks 🙌 I've assigned it to you, let us know if you need any help, e.g. with tests or the CI @NmN03jain

PS: be sure to read the contributing guide ~

[mj12albert]

@Matt-roki Thanks for reporting this btw ~ I've updated the repro in the description

[NmN03jain]

ci/circleci: test_static
ci/circleci: test_types
@mj12albert how to i resolve this issues

[siriwatknp]

I think this can be closed by the new integration package @mui/material-nextjs