SVG stroke and fill props values on DOM node

[Justin Mak]

Looks like the stroke and fill props that get threaded through to the underlying DOM node don't receive the transformed values.

[Rogin Farrer]

I think this is expected. The transform happens within the styled-component, rendered by the component that receives the fill and stroke props. I think ideally those attributes would not get passed down to the underlying element, and let the styling be applied by CSS.

You can use shouldForwardProp exported from this package alongside styled-components' or Emotion's APIs for configuring the should forward prop behavior. You can see it used in the example:

system-props/example/src/box-styled-components.tsx

Lines 7 to 12 in 46db72b

 export const Box = styled('div').withConfig({ 
   shouldForwardProp: (prop, defaultValidtorFn) => 
     shouldForwardProp(prop) && defaultValidtorFn(prop), 
 })<BoxProps>({ boxSizing: 'border-box' }, system(config), ({ sx, ...props }) => 
   css(sx)(props) 
 );