react mui box 如何实现部分loading

可以使用 `CircularProgress` 组件和 `Box` 组件来实现部分 Loading 效果。以下是一个示例代码：

import React, { useState } from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';

const PartialLoadingBox = ({ isLoading, children }) => {
  const [loading, setLoading] = useState(isLoading);

  return (
    <Box position="relative">
      {loading && (
        <CircularProgress
          size={40}
          thickness={4}
          style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
        />
      )}
      <Box style={{ opacity: loading ? 0.5 : 1 }}>
        {children}
      </Box>
    </Box>
  );
};

export default PartialLoadingBox;

在这个组件中，我们使用了 `useState` 来控制 Loading 状态，并在 `Box` 组件中设置了 `opacity` 样式来实现透明度变化。你可以将 `isLoading` 属性传递给该组件来控制 Loading 的显示与隐藏。