Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow CSS to target layout of a single page (for docs, blog, pages)

See original GitHub issue

Have you read the Contributing Guidelines on issues?

I have read the Contributing Guidelines on issues.

Description

I went trough documentation and i’m unable to find an option to disable stickiness of navbar for specific page/s

this refers to class .navbar--fixed-top

as an example of page that i’d like to disable stickiness is a typescript-eslint playground

i’m not sure if this is a documentation request or feature request

Self-service

I’d be willing to address this documentation request myself.

Issue Analytics

State:
Created a year ago
Comments:8 (1 by maintainers)

Top GitHub Comments

1reaction

armano2commented, Jun 16, 2022

@slorber yes your solution is working, but at the end i decided to do it differently, by changing how tooltips are rendered in playground

1reaction

slorbercommented, Jun 15, 2022

Couldn’t this work?

https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/website/src/pages/play.tsx

function Play(): JSX.Element {
  return (
    <HtmlClassNameProvider className="my-custom-playground-className">
      <Layout title="Playground" description="Playground" noFooter={true}>
        <BrowserOnly fallback={<Loader />}>
          {(): JSX.Element => {
            const Playground = lazy(() => import("../components/Playground"));
            return (
              <Suspense fallback={<Loader />}>
                <Playground />
              </Suspense>
            );
          }}
        </BrowserOnly>
      </Layout>
    </HtmlClassNameProvider>
  );
}

This API is not officially documented for now, hopefully we may remove it in the future.

Its only role is to allow composition on avoid Helmet <Head> component for <html className="xyz">. (ie a children HTML className does not override parent ones)

export function HtmlClassNameProvider({
  className: classNameProp,
  children
}: {
  className: string,
  children: ReactNode
}): JSX.Element {
  const classNameContext = React.useContext(HtmlClassNameContext);
  const className = clsx(classNameContext, classNameProp);
  return (
    <HtmlClassNameContext.Provider value={className}>
      <Head>
        <html className={className} />
      </Head>
      {children}
    </HtmlClassNameContext.Provider>
  );
}

If you don’t need composition on the playground page, you could as well just use this, which is already part of our public API:

<Head>
  <html className={className} />
</Head>

Top Results From Across the Web

How To add Custom CSS for Specific Pages

Then, this HTML class or id allows us to target all our CSS scripts to the desired page or post. 1.1. Find the...

page - CSS: Cascading Style Sheets - MDN Web Docs

It targets and modifies the page's dimensions, page orientation, and margins. The @page at-rule can be used to target all pages in a...

Responsive web design basics

Take a look at our complete course on Responsive Web Design—Learn ... This allows the page to reflow content to match different screen...

HTML Basics - Quarto

title: "My document" format: html: toc: true html-math-method: katex css: ... If you want to do more extensive customization see the documentation on...

CSS - Wikipedia

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such...