英文:
Background element overlays the Layout in React-router-dom with tailwind css
问题
I moved all background styles to it's own element and wrap it the whole Layout.
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>
);
So, using this brings me only visible Background without elements. If I remove the wrapper I would see the elements but lost my Background. What should I do?
I know that every small piece of code that has another functionality should move to its own element, so I did this. Am I right?
This is how the Background element looks inside:
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;
Thanks for your help!
英文:
I moved all background styles to it's own element and wrap it the whole Layout.
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>
);
So, using this brings me only visible Background without elements. If I remove the wrapper I would see the elements but lost my Background. What should I do?
I know that every small piece of code that has another functionality should move to its own element, so I did this. Am I right?
This is how the Background element looks inside:
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;
Thanks for your help!
答案1
得分: 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%;，以便它保持在内容的后面。
英文:
You need to pass the children elements of the Background component as props and render them appropriately. Otherwise React will not do anything with them.
Something like this would work:
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>
);
};
I added an outermost div with position: relative, so the child div can be position: absolute; top: 0; left: 0; height: 100%; width: 100%; so it stays behind the content.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论