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

m0rkklqb  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(104)

主体位于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

bqucvtff

bqucvtff1#

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

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

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

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

相关问题