Merge pull request #7723 from marmelab/7706-cannot-change-color-using-sx-on-loading-page

Add sx prop to Loading component

Author: djhi

packages/ra-ui-materialui/src/layout/Loading.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import { SxProps } from '@mui/material';
 import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useTranslate } from 'ra-core';
 
-export const Loading = props => {
+export const Loading = (props: LoadingProps) => {
     const {
         className,
         loadingPrimary = 'ra.page.loading',
         loadingSecondary = 'ra.message.loading',
+        ...rest
     } = props;
 
     const translate = useTranslate();
     return (
-        <Root className={className}>
+        <Root className={className} {...rest}>
             <div className={LoadingClasses.message}>
                 <CircularProgress
                     className={LoadingClasses.icon}
@@ -37,6 +39,13 @@ Loading.defaultProps = {
     loadingSecondary: 'ra.message.loading',
 };
 
+export interface LoadingProps {
+    className?: string;
+    loadingPrimary?: string;
+    loadingSecondary?: string;
+    sx?: SxProps;
+}
+
 const PREFIX = 'RaLoading';
 
 export const LoadingClasses = {