If you are using styled-component, you might have warning in the console:

Warning: Received true for a non-boolean attribute primary.

If you want to write it to the DOM, pass a string instead: primary="true" or primary={value.toString()}.

See the following example:

The styled-component FAQ solves this by using an adapter that destructured unwanted props.

It does work but adds a real complexity in your code.

Since styled-component 5.1, you can in fact use the transient props to fix this issue.

The only thing that you need is to change the prop primary to $primary (with a leading $), then the prop will not be passed down to the child component:

In practice, this helps me cleaning the following code: ```diff - /* eslint-disable @typescript-eslint/no-unused-vars, react/jsx-props-no-spreading / - type CardProps = Parameters[0]; - const CleanedCard = ({ - isSubscription, - ...rest - }: CardProps & { isSubscription: boolean }) => <MpdCard {...rest} />; - / eslint-enable */

• const Card = styled(CleanedCard)<{ isSubscription: boolean }>`

• const Card = styled(MpdCard)<{ $isSubscription: boolean }>` position: relative; display: flex; align-items: center; padding: 20px 25px; min-height: 82px; border-left: 5px solid

• ${(props) => (props.isSubscription ? $alertYellow : $defaultWhite)};

• ${(props) => (props.$isSubscription ? $alertYellow : $defaultWhite)};

// …

• <Card $isSubscription />

I opened [a pull request](https://github.com/styled-components/styled-components-website/pull/832) to upgrade the FAQ on the subject.