While it's possible to target the internal elements via CSS, it's definitely annoying.
Forwarding a style and a className to the root component allows for a customization without the need for a wrapper or relying on internal naming/structure (so deeply, at least).
Also, Styled-Components works entirely based on the className property, so in order for styled(GradientPicker) to work, it has to make use of the className property.
Also, I spread the props (both received and forwarded) for better diff and readability.
Description
While it's possible to target the internal elements via CSS, it's definitely annoying.
Forwarding a
styleand aclassNameto the root component allows for a customization without the need for a wrapper or relying on internal naming/structure (so deeply, at least).Also, Styled-Components works entirely based on the
classNameproperty, so in order forstyled(GradientPicker)to work, it has to make use of theclassNameproperty.Also, I spread the props (both received and forwarded) for better diff and readability.