如何使用react微调器使preLoader的大小填充react中的屏幕

Question

我使用react spinner在我的react页面中创建了一个预加载程序，它正在工作，但它没有显示在全屏中，而是显示在左上角，无法正确查看。

import React from "react";
import Header from "./components/Header";
import { Helmet } from "react-helmet";
import Sidebar from "./components/Sidebar";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import { useState, useEffect } from "react";
import "./index.css";
const App = () => {
const [load, setLoaded] = useState(false);
useEffect(() => {
setLoaded(true);
setTimeout(() => {
setLoaded(false);
}, 8000);
}, []);
return (
<div className="container">
{load ? (
<ClimbingBoxLoader size={150} color={"#123abc"} loading={load} />
) : (

<div>
<div className="indexing">
<Header className="fixed" />
</div>
<div>
<Sidebar></Sidebar>
</div>
</div>
)}
</div>
);
};
export default App;

Answer 1

问题在于您的大小。我在这里做了一些测试，看到：

测试1测试2

将尺寸更改为：10装载机将自动显示在屏幕中央。

import React from 'react';
import ClimbingBoxLoader from '@bit/davidhu2000.react-spinners.climbing-box-loader';

export default (
<ClimbingBoxLoader size={10} color={"#123abc"} loading="true" />
)

请参阅此处的文档。