我把所有的背景风格，它自己的元素和 Package 它的整个布局。

import { Outlet } from 'react-router-dom';
import Background from '../components/Background';
import Footer from '../components/Footer';
import NewNavbar from '../components/NewNavbar';

export const AppLayout = () => (
    <div>
        <Background>
            <nav className=''>
                <NewNavbar />
            </nav>
            <main className=''>
                <Outlet />
            </main>
            <footer>
                <Footer />
            </footer>
        </Background>
    </div>
);

所以，使用这个选项只会带来没有元素的可见背景。如果我移除 Package ，我会看到元素，但会丢失背景。我该怎么办？
我知道每一小段有其他功能的代码都应该移到它自己的元素中，所以我就这么做了，对吗？
以下是背景元素的内部外观：

import React from 'react';

const Background = () => {
    return (
        <div>
            <div className='bg-white'>
                <div className='flex min-h-screen justify-between flex-col absolute inset-x-0 top-[-10rem] z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]'>
                    <svg
                        className='relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]'
                        viewBox='0 0 1155 678'>
                        <path
                            fill='url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)'
                            fillOpacity='.3'
                            d='M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z'
                        />
                        <defs>
                            <linearGradient
                                id='45de2b6b-92d5-4d68-a6a0-9b9b2abad533'
                                x1='1155.49'
                                x2='-78.208'
                                y1='.177'
                                y2='474.645'
                                gradientUnits='userSpaceOnUse'>
                                <stop stopColor='#9089FC' />
                                <stop offset={1} stopColor='#FF80B5' />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
            </div>
            <div className='inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]'>
                <svg
                    className='relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]'
                    viewBox='0 0 1155 678'>
                    <path
                        fill='url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)'
                        fillOpacity='.3'
                        d='M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z'
                    />
                    <defs>
                        <linearGradient
                            id='ecb5b0c9-546c-4772-8c71-4d3f06d544bc'
                            x1='1155.49'
                            x2='-78.208'
                            y1='.177'
                            y2='474.645'
                            gradientUnits='userSpaceOnUse'>
                            <stop stopColor='#9089FC' />
                            <stop offset={1} stopColor='#FF80B5' />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        </div>
    );
};

export default Background;

谢谢你的帮忙！