背景元素使用 tailwind css 覆盖 React-router-dom 中的布局

Question

我将所有背景样式移动到它自己的元素并将其包装在整个布局中。

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>
);

因此，使用它只会给我带来没有元素的可见背景。如果我移除包装，我会看到元素，但会丢失我的背景。我应该怎么办？

我知道每一小段具有其他功能的代码都应该移动到它自己的元素中，所以我这样做了。我对吗？

这是 Background 元素在内部的样子：

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;

感谢您的帮助！

Answer 1

您需要将 Background 组件的子元素作为 props 传递并适当地渲染它们。否则 React 不会对它们做任何事情。

这样的事情会起作用：

const Background = ({ children }) => {
  return (
    <div className="relative">
      <div className="absolute top-0 left-0 h-full w-full">
        <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>
      {children}
    </div>
  );
};

我添加了一个最外层的div和position: relative，所以孩子div可以是position: absolute; top: 0; left: 0; height: 100%; width: 100%;所以它留在内容后面。