RaLabeled classname not applied properly

What you were expecting: We’re migrating over to RA 4, and we’ve noticed difficulties with applying style overrides to labelled components.

In the theme object we’re applying the following overrides:

RaLabeled: {
      styleOverrides: {
        label: {
          fontSize: "1.4em",
          color: PrimaryColors.Black,
          border: "1px solid red",
          opacity: 0.87,
          fontWeight: 500,
        },
      },
    },

But these styles aren’t being applied in the app because the classname being generated by RA is the following:

This might be a red herring, but it seems that our styles may not be applied properly because the Labeled component’s root cass class is css-8l66u2-MuiStack-root-RaLabeled-root. And it seems we can no longer target it via the theme object.

Do you have a codesandbox that uses RA v4 beta? If so i can create a repro case easily without having to pull from the repo

insert short code snippets here

Other information:

Environment

• React-admin version: 4.0.0-beta.1.0
• Last version that did not exhibit the issue (if applicable):
• React version:
• Browser:
• Stack trace (in case of a JS error):

[djhi]

That’s because most of the default inputs don’t use the Labeled component but leverage the defaults of MUI instead.

I forked the codesandbox to show how to customize MUI labels and added a Labeled so that you can check it works.

https://codesandbox.io/s/modern-wave-q63dwi?file=/src/comments/CommentEdit.tsx

[andrico1234]

Thanks a lot!