Brush component does not work with Styled Components

[beltranrengifo]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

• Brush component wrapped with styled components does not render.
• It does if it's used without it

What is expected?

Brush component renders in both cases

What is actually happening?

Brush does not render

Environment	Info
Recharts	v2.12.1
React	16.14.0
System	14.3 (23D56)
Browser	Chrome Version 121.0.6167.184 (Official Build) (arm64)

---

On my local project, I can see a TS error:

No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, DefaultTheme, any, any>', gave the following error.
    Argument of type 'typeof Brush' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof Brush' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof Brush' is not assignable to type 'string'.
  Overload 2 of 2, '(component: keyof IntrinsicElements | ComponentType<any>): ThemedStyledFunction<keyof IntrinsicElements | ComponentType<any>, DefaultTheme, {}, never>', gave the following error.
    Argument of type 'typeof Brush' is not assignable to parameter of type 'keyof IntrinsicElements | ComponentType<any>'.
      Type 'typeof Brush' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'getDerivedStateFromProps' are incompatible.
          Type '(nextProps: Props, prevState: State) => State' is not assignable to type 'GetDerivedStateFromProps<any, any>'.
            Types of parameters 'nextProps' and 'nextProps' are incompatible.
              Type 'Readonly<any>' is not assignable to type 'Props'.
                Property 'height' is missing in type 'Readonly<any>' but required in type 'BrushProps'.ts(2769)
Brush.d.ts(19, 5): 'height' is declared here.

but it renders.

[beltranrengifo]

I found this thread here about other library, seems quite similar
palantir/blueprint#5387

[ckifer]

recharts was not built with styled components in mind and styled components isn't really a recommended way of styling recharts charts. Even if it did render, styles may not be exactly what you want/are expecting.

This is a hack but

Set StyledBrush.displayName = "Brush"; and the Brush should display. Recharts uses some static properties to determine what its going to render (we're trying to get rid of these).

But as you can see the fill/stroke specification only affects the text of the Brush here, wheras directly specifying fill/stroke, etc. changes the Brush styles as expected

[beltranrengifo]

hey @ckifer ! thanks so much for taking your time to answer this ❤️

I've been reading about this displayName filtering. The thing is:

• I can render properly the Brush on my project without adding that property to the component
• But TS complains, and I don't know how to solve it
• A simple // @ts-expect-error can fix the pipeline 😄

take this snippet into consideration, if you will

import { Brush as RechartsBrush } from 'recharts';

const Brush = styled(RechartsBrush)`
    rect:not(.recharts-brush-slide) {
        rx: 2;
        stroke-width: 2;
    }

    rect.recharts-brush-slide {
        fill-opacity: 0;
    }
`;

Brush.displayName = RechartsBrush.displayName;

export { Brush };

styled components is throwing the error in the screenshot

I guess this is some TS matter...

[ckifer]

I'm not sure its the responsibility of recharts to support how TypeScript behaves with a specific library (i.e. styled-components).

That being said, this could be because Brush is a class component? https://github.com/recharts/recharts/blob/3.x/src/cartesian/Brush.tsx#L120

Does this work with any other recharts components? Or do all of them throw TS errors? Try with a function component like Label https://github.com/recharts/recharts/blob/3.x/src/component/Label.tsx

[beltranrengifo]

hey @ckifer thanks for your support ❤️

That being said, this could be because Brush is a class component?

I thought same, let me check and ping you back

[beltranrengifo]

Yeah, indeed, seems to be the way you mention

Do you know if there's any fix for this?
Should we re-write the Brush component?
Should I ask in Styled repo? 🤔

Thank you

[ckifer]

There is currently no fix for this, but we are trying to refactor things. Eventually that will to be 100% function components.

This isn't feasible at the moment due to time, due to inability to identify potential regressions (lack of test coverage), and due to other priorities, but it will be solved eventually (though eventually isn't defined very well, could be years)

[ckifer]

See #3727 and #3717 for some more info about what we're currently working towards. and #3407 if you'd like to help!

[ckifer]

Going to close this, our eventual refactorings will solve this issue albiet indirectly