Skip to main content

Styling

As explained in the top-level styling section, aesthetic considerations are intentionally left to you, the author. That being said, react-a11y-footnotes ships basic styles you can opt in to.

Using base styles​

If you use a bundler:

import {
  FootnotesProvider,
  FootnoteRef,
  Footnotes,
} from "react-a11y-footnotes";
import "react-a11y-footnotes/dist/styles.css";

Without a bundler, you can load:

your-app/node_modules/react-a11y-footnotes/dist/styles.css

or a CDN URL:

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-a11y-footnotes@<version>/dist/styles.css"
/>

Overriding and customization​

You can use these data attributes to hook styles onto various components:

  • data-a11y-footnotes-ref
  • data-a11y-footnotes-footer
  • data-a11y-footnotes-title
  • data-a11y-footnotes-list
  • data-a11y-footnotes-list-item
  • data-a11y-footnotes-back-link
tip

You do not have to use these for styling. You can also leverage the fact that the library renders role attributes and stick to selectors like [role="doc-noteref"]. As you prefer.

Using CSS-in-JS​

Given every component rendered by the Footnotes component is customisable, and FootnoteRef accept both style and className, integration with CSS-in-JS libraries should be relatively seamless.

For instance, the FootnoteRef could be wrapped as such with Fela:

const refStyles = () => ({ color: "deeppink" });
const Ref = createComponentWithProxy(refStyles, FootnoteRef);

And with styled-components:

const Ref = styled(FootnoteRef)`
  color: deeppink;
`;