React中Mafs坐标网格未铺满屏幕排查求助

我使用Mafs库制作数学动画，本应生成铺满屏幕的笛卡尔坐标网格，但出现了空白区域。以下是我的实现代码：

import React from 'react';
import { Mafs, Coordinates } from 'mafs';
import 'mafs/core.css'; // 确保导入Mafs核心样式表

function Example() {
  return (
    <Mafs>
      <Coordinates.Cartesian />
    </Mafs>
  );
}

function App() {
  return (
    <div style={{ width: '100%', height: '100vh', margin: 0 }}>
      <Example />
    </div>
  );
}

export default App;

问题原因 #

空白区域主要来自两个点：

1. 浏览器默认给body元素设置了margin，导致外层div无法真正占满屏幕
2. <Mafs>组件未明确设置尺寸，无法完全继承父容器的宽高

解决方法 #

修改代码，添加全局样式重置并给<Mafs>组件设置尺寸：

import React from 'react';
import { Mafs, Coordinates } from 'mafs';
import 'mafs/core.css';

// 重置全局样式
const GlobalStyles = () => (
  <style>
    {`
      body {
        margin: 0;
        padding: 0;
      }
    `}
  </style>
);

function Example() {
  return (
    // 让Mafs组件完全填充父容器
    <Mafs style={{ width: "100%", height: "100%" }}>
      <Coordinates.Cartesian />
    </Mafs>
  );
}

function App() {
  return (
    <>
      <GlobalStyles />
      <div style={{ width: '100%', height: '100vh' }}>
        <Example />
      </div>
    </>
  );
}

export default App;

修改说明 #

• 通过全局样式清除body的默认边距，确保最外层容器能真正铺满屏幕
• 给<Mafs>组件设置width: 100%和height: 100%，让它完全继承父容器的尺寸，避免内部出现空白

内容的提问来源于stack exchange，提问作者Adam Atom