Cannot change color using sx on loading page

[smeng9]

What you were expecting:

I expect the text color on loading page can be changed

What happened instead:

The text color seems cannot be changed

Steps to reproduce:
Fork https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple on codesandbox
Delete all resource and routes
Add a ready prop with following component

        <Loading
          loadingPrimary="loading1"
          sx={{
            color: "red",
            [`& .RaLoading-message`]: {
              color: "red"
            }
          }}
        />

Related code:

https://codesandbox.io/s/delicate-water-py8q0r?file=/src/index.tsx:956-996

Other information:

Environment

• React-admin version: 4.0.4
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.0
• Browser: Edge 101
• Stack trace (in case of a JS error):

[slax57]

Indeed the color on the Loading component is not customizable (defaults to "primary"), and the sx prop isn't handled either (I get a TS warning when I try).
Since the docs do not mention the sx prop, and given you can probably work around this limitation with a custom theme, I'll label this as an enhancement.

[smeng9]

Hi @slax57

I would consider this as a bug, even though I agree with you I can easily write my own custom component.

The documentation https://marmelab.com/react-admin/Theming.html#sx-overriding-a-component-style mentions all react-admin components expose an sx property and <Loading />, <LoadingPage /> surely are components.

[slax57]

Alright then. I think it shouldn't be too hard to fix anyway. I'll see to fix it along with #7712