docusaurus-theme-classic > Heading's className prop does nothing

[JoshuaKGoldberg]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The <Heading> component in docusaurus-theme-classic can be given a className prop:

<Heading as="h2" className="something">Hi!</Heading>

However, the component's manual className=clsx(...) prop ignores props.className:

docusaurus/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx

Lines 26 to 33 in 7ffa9f7

	<As
	{...props}
	className={clsx(
	'anchor',
	hideOnScroll
	? styles.anchorWithHideOnScrollNavbar
	: styles.anchorWithStickyNavbar,
	)}

This means any className added in user-land is ignored.

Reproducible demo

https://github.com/typescript-eslint/typescript-eslint/pull/5951/files#diff-3b034ddb6525c7b93f97ced8a696c78c1837f072b9d1e70c46049675e0e09bf4R112-R116

Steps to reproduce

1. Checkout that PR -> yarn -> yarn start
2. Change
   ...
   to ...
3. Observe that the site page does not center the heading text

Expected behavior

The className should be added to the clsx in Heading.

Actual behavior

The className is ignored.

Your environment

• Public source code: https://github.com/typescript-eslint/typescript-eslint
• Public site URL: https://typescript-eslint.io
• Docusaurus version used: 2.2.0, but the code isn't changed in latest main
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 107, Node 16.18
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS Monterey

Self-service

• I'd be willing to fix this bug myself.

[slorber]

👍 ok to forward the Heading className prop

Good first issue for anyone willing to contribute - please submit a PR directly, and do not claim the issue

---

Note historically most components did not forward className in our theme, and it's an ongoing effort to add className forwarding everywhere it makes sense (and maybe later forwarding refs? although it's a more niche use-case).

For example, it can be useful to add a custom className by simply wrapping instead of ejecting, also enabling you to use CSS modules

import styles from "./styles"

function HeadingWrapper(props) {
  return <Heading {...props} className={clsx(styles.myCustomClassName, props.className)}/>
}