Broken TextInput Style after ScopedCSSBaseline is introduced

[smeng9]

What you were expecting:

I expect the TextInput to have enough space for user to type

What happened instead:

TextInput does not have enough space. See attached image

Steps to reproduce:

The issue needs to go through a list of steps to trigger. I can only reproduce it locally using vite, not on codesandbox Update: Seems can be reproduced on CodeSandbox as well.

---

Goto https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple
4. Logout the user using the user button in the react-admin browser page
5. Refresh the page of login screen inside StackBlitz window
6. Login the user using admin and password
7. Navigate to Comments in the sidebar and create a new comment
8. The broken TextInput Style will appear

Related code:

https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple

Other information:

Related #8216

Environment

• React-admin version: 4.5.0
• Last version that did not exhibit the issue (if applicable): 4.4.5
• React version: 18.2.0
• Browser: Edge 106
• Stack trace (in case of a JS error):

[smeng9]

Further investigation of the issue suggested that ScopedCSSBaseline is not introduced early enough.

RaLayout is rendered after RaLogin.

https://mui.com/material-ui/react-css-baseline/#scoping-on-children

Make sure you import ScopedCssBaseline first to avoid box-sizing conflicts as in the above example.

Suggest: Probably still leave this to user, and ask user to wrap their App in App.jsx and make the ScopedCSSBaseline imported right after react.

[WiXSL]

The CodeSandbox you've provided is unusable.
Can you fix it?

[smeng9]

Hi @WiXSL

I have replaced it with the StackBlitz one (The original stack blitz one seems can reproduce it). Can you please try again?

[WiXSL]

You are right.
I'm marking this as a bug