目前，我正在尝试在 React 中实现以下视差效果，其中我的图像垂直处于固定位置但随文本从左向右移动。
我已经使用 useEffect 来实现这一点，我采用总高度像素并相应地移动我的组件。这样做的问题是它在我的屏幕上看起来很完美，但是一旦我将它调整到更大或更小的屏幕，布局就会变得混乱。是否有同样的效果但响应友好。随意编辑 CodeSandBox
CodeSandBox（全屏查看以获得更好的参考）：https ://codesandbox.io/s/stoic-rumple-s8cr6?file=/src/App.js
代码：
export default function App() {
const [index, setIndex] = useState(false);
const [display, setDisplay] = useState(false);
const [number, setNumber] = useState(false);
const [screen, setScreen] = useState(false);
useEffect(function onFirstMount() {
const changeBackground = () => {
let value = window.scrollY;
console.log(value);
let img = document.getElementById("moveLeft");
let text = document.getElementById("moveUp");
let text2 = document.getElementById("text2");
let text3 = document.getElementById("text3");
let text4 = document.getElementById("text4");
let imgWidth = 280;
text.style.marginTop = "-" + value * …我目前使用 Strapi 作为我的 CMS，使用 NextJs/React 作为我的前端。我在我的 Strapi 中包含了 1 个字段作为内容丰富的字段。当我在 Strapi 本身中添加内容并查看预览时，它显示了带有所有间距和下划线等的正确输出。但是当我切换到网页视图时，它全部都是 1 个句子，没有任何样式。我画下划线的地方会显示<u>Sentence</u>在我的网页中。
这是我当前的代码：
export default function name({ posts }) {
return (
<>
<div>
<div>
{posts.Title}
</div>
</div>
<div>
{posts.Content}
</div>
<Carousel />
</>
);
}
// Tell nextjs how many pages are there
export async function getStaticPaths() {
const res = await fetch("http://localhost:1337/blogs");
const posts = await res.json();
const paths = posts.map((blog) => ({
params: { id: blog.id.toString() },
}));
return {
paths,
fallback: false, …我有 2 个页面主页和关于我们页面，其中两个页面的链接分别以 /home 和 /about 结尾。登陆页面是我的主页，因此我已将其 css 属性设置为活动状态，以便它突出显示。但是当我转到“关于”页面时，主页 css 保持活动状态。当我的路由在 nextJs 中发生变化时，如何动态更改 css？
我当前的代码：
export default function Nav({ children }) {
return (
<div>
<Head>
<title>Legacy</title>
<meta name="description" content="Generated by create next app" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</Head>
<nav>
<div className="logo">Legacy</div>
<input type="checkbox" id="click" />
<label for="click" className="menu-btn">
<i className="fas fa-bars"></i>
</label>
<ul>
<li>
<Link href="http://localhost:3000/home">
<a className="active" >
Home
</a>
</Link>
</li>
<li>
<Link href="http://localhost:3000/about">
<a >About Us</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}