css 如何添加一个类到主体中，并根据混音中的页面进行更改？

m0rkklqb 于 5个月前发布在其他

关注(0)|答案(1)|浏览(46)

主体位于root.jsx中，我想给予它一个参数作为class，该参数将根据页面的不同而变化。在每个页面上的路由中，我想赋值，例如，on _index的class等于“公司主页”，在餐馆路由中，class等于“场地公司”等等。是否可以将参数从路由传输到root.jsx？
root.jsx

export default function App() {
  return (
    <html lang='en'>
      <head>
        <meta charSet='utf-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <link rel='preconnect' href='https://fonts.googleapis.com' />
        <link
          rel='preconnect'
          href='https://fonts.gstatic.com'
          crossOrigin='anonymous'
        />
        <link
          href='https://fonts.googleapis.com/css?family=Montserrat:wght@100,300,400,500,700&display=swap'
          rel='stylesheet'
        />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

字符串
_index.jsx

export default function Index() {
  const { startPage } = useLoaderData()
  const page = startPage.page.sections;
  return (
    <main id='main'>
      <PageComponents page={page} />
    </main>
  );
}

型
restaurants.jsx

export default function Restaurants() {
  const { restaurants } = useLoaderData();
  return (
    <>
      <PageComponents page={restaurants.sections} />
      <footer className='footer' />
    </>
  );
}

型
PageComponents.jsx

import loadable from "@loadable/component";

const components = {
  logo: loadable(() => import("./Logo")),
  intro: loadable(() => import("./Intro")),
  languageSwitch: loadable(() => import("./LanguageSwitch")),
  venueGroup: loadable(() => import("./VenueGroup")),
};

export default function PageComponents({ page }) {
  return (
    <main>
      {page
        .filter(({ type }) => !!components[type])
        .map(({ data, type }) => {
          const Component = components[type];

          return (
            <div key={type}>
              <Component data={data} />
            </div>
          );
        })}
    </main>
  );
}

型
尝试在root.jsx中使用函数加载器来获取每个页面的API，并在正文className中添加一个变量，但有时候没有关于pageclassName的数据，因此我需要从路由手动将有关className的参数传递给每个页面，并将此参数传输到root.jsx

css

来源：https://stackoverflow.com/questions/77703207/how-to-add-a-class-to-the-body-that-will-change-depending-on-the-page-in-the-rem

1条答案

按热度按时间

bqucvtff1#

简单的方法是引入一个对象，其中有CSS文件和URL路径的Map，然后您可以使用useLocation钩子来检查哪个子组件正在呈现。

import { useLocation } from "@remix-run/react";

function SomeComponent() {
  const location = useLocation();
  // ...
}

字符串
您可以交换CSS文件链接。但我建议不要更改父组件本身的CSS。只需将不同的CSS文件添加到相应的组件中。如果每次渲染子组件时都更新父组件上的CSS文件，那么它将影响应用程序的性能，并违背React提供的性能调优。如果是同一个网站，只是不同的子页面，那么你总是希望保持父主题，如页眉和页脚在整个应用程序中的一致性，这是很好的设计原则。

赞(0）回复(0）举报 5个月前

我来回答

css 如何添加一个类到主体中，并根据混音中的页面进行更改？

1条答案

相关问题

热门标签

最新问答