`react-doctor/styled-components-non-transient-custom-prop-on-intrinsic-element`

Non-transient custom prop on styled intrinsic element

Category: Bugs
Severity: warn
Source: oxlint-plugin-react-doctor
Framework: global
Enabled when: styled-components:6
Default: Enabled

Validate the diagnostic

Confirm the reported code matches this rule before you edit it.

Confirm the reported code matches react-doctor/styled-components-non-transient-custom-prop-on-intrinsic-element. Compare it with the Before example and verify the same API, framework, and execution context. Treat it as a false positive only when one of those conditions differs.

Compare the code

The corrected pattern shows a focused way to address the diagnostic.

Reported pattern

import styled from "styled-components";

const Button = styled.button<{ active: boolean }>`
  color: ${({ active }) => (active ? "blue" : "gray")};
`;

<Button active />

Corrected pattern

import styled from "styled-components";

const Button = styled.button<{ $active: boolean }>`
  color: ${({ $active }) => ($active ? "blue" : "gray")};
`;

<Button $active />

How to fix

Use the corrected pattern as a reference. Preserve behavior that the rule does not require you to change.

Copyable fix prompt

Copy this self-contained prompt into your coding agent after you confirm the diagnostic.

Fix every confirmed react-doctor/styled-components-non-transient-custom-prop-on-intrinsic-element diagnostic in the current repository. Required change: - Prefix custom styled-components props with $ (e.g. $active) so styled-components v6 keeps them off the DOM node instead of forwarding them as invalid attributes.

Reference transformation:Before:

import styled from "styled-components";

const Button = styled.button<{ active: boolean }>`
  color: ${({ active }) => (active ? "blue" : "gray")};
`;

<Button active />

After:

import styled from "styled-components";

const Button = styled.button<{ $active: boolean }>`
  color: ${({ $active }) => ($active ? "blue" : "gray")};
`;

<Button $active />

Constraints: - Confirm the reported code matches the Before pattern. - Make the smallest change that fixes the root cause. - Preserve behavior and interfaces unrelated to this diagnostic. - Reuse existing project components, utilities, and conventions. - Do not introduce render-phase side effects, render-phase state updates, or Hooks rule violations. - Adapt identifiers and framework details instead of copying blindly. - Do not disable the rule or suppress matching code. - Confirm this rule is enabled for the project: styled-components:6. Verification: - Run focused tests for the changed behavior. - Run React Doctor and confirm this diagnostic no longer appears. - Report the files changed and any checks you could not run.

More Bugs rules from the rules reference:

react-doctor/tanstack-start-missing-head-content: Add `<HeadContent />` inside `<head>` in your __root route — without it, route `head()` meta tags are silently dropped
react-doctor/tanstack-start-missing-scripts: Root route missing Scripts
react-doctor/tanstack-start-no-anchor-element: `import { Link } from '@tanstack/react-router'` — enables type-safe routes, preloading via `preload="intent"`, and client-side navigation
react-doctor/tanstack-start-no-direct-fetch-in-loader: Use `createServerFn()` from @tanstack/react-start — provides type-safe RPC, input validation, and proper server/client code splitting
react-doctor/tanstack-start-no-dynamic-server-fn-import: Use `import { myFn } from '~/utils/my.functions'` — the bundler replaces server code with RPC stubs only for static imports

react-doctor/styled-components-non-transient-custom-prop-on-intrinsic-element