pages kit的Custom Component显示异常

import React, { useEffect, useRef } from '@blocklet/pages-kit/builtin/react';
import { Box, Typography } from '@blocklet/pages-kit/builtin/mui/material';

const MatrixBackground = ({ speed = 50, fontSize = 14, density = 0.05 }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    let width = window.innerWidth;
    let height = window.innerHeight;

    const resizeCanvas = () => {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
      context.fillStyle = '#000';
      context.fillRect(0, 0, width, height);
    };

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    const columns = Math.floor(width / fontSize);
    const drops = new Array(columns).fill(1);

    const drawMatrix = () => {
      context.fillStyle = 'rgba(0, 0, 0, 0.05)';
      context.fillRect(0, 0, width, height);

      context.fillStyle = '#9177cb'; // Changed to red
      context.font = `${fontSize}px monospace`;

      for (let i = 0; i < drops.length; i++) {
        const text = String.fromCharCode(Math.random() * 128);
        context.fillText(text, i * fontSize, drops[i] * fontSize);

        if (drops[i] * fontSize > height && Math.random() > 1 - density) {
          drops[i] = 0;
        }
        drops[i]++;
      }
    };

    const interval = setInterval(drawMatrix, speed);

    return () => {
      clearInterval(interval);
      window.removeEventListener('resize', resizeCanvas);
    };
  }, [speed, fontSize, density]);

  return (
    <Box sx={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      overflow: 'hidden',
      backgroundColor: '#000',
    }}>
      <canvas ref={canvasRef} style={{ display: 'block' }} />
      <Typography
        variant="h4"
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          color: '#9177cb', // Changed to red
          textAlign: 'center',
          fontFamily: 'monospace',
          textShadow: '0 0 5px #FF0000', // Changed to red
        }}
      >
        肥而不腻，华而不实
      </Typography>
    </Box>
  );
};

export default MatrixBackground;

export const PROPERTIES_SCHEMA = [
  {
    id: '1',
    key: 'speed',
    type: 'number',
    locales: {
      en: { name: 'Animation Speed', defaultValue: 50 },
      zh: { name: '动画速度', defaultValue: 50 }
    }
  },
  {
    id: '2',
    key: 'fontSize',
    type: 'number',
    locales: {
      en: { name: 'Font Size', defaultValue: 12 },
      zh: { name: '字体大小', defaultValue: 12 }
    }
  },
  {
    id: '3',
    key: 'density',
    type: 'number',
    locales: {
      en: { name: 'Rain Density', defaultValue: 0.01 },
      zh: { name: '雨滴密度', defaultValue: 0.01 }
    }
  }
];