According to this issue https://github.com/styled-system/styled-system/issues/280 this is related to how the HOCs in styled-components work, so does anyone know how I could fix this?

April 5, 2019 at 1:27am

Joshua Alpuerto@joshuacalpuerto

1:27am

Can you have minimal reproduction in codesandbox? On the issue you linked it is with emotion and react-emotion. I have a feeling that if you are using styled-components then attrs should work to control the attributes that should be merge on your component

Edited

April 5, 2019 at 8:57am

Daan De Deckere@daan-de-deckere

8:57am

I created a basic demo here:

8:58am

I’m not sure how attrs would work since I’m trying to prevent some attrs to end up into the DOM

Joshua Alpuerto@joshuacalpuerto

12:41pm

Thanks for your repro. You are correct even using attr the display attribute is still included. It seems because it is a valid DOM attribute just like fontSize and fontWeight. Is it possible to change the the display to something else?

April 14, 2019 at 11:30am

Jon K. Wheeler@jonkwheeler

11:30am

^^ that's correct. It's a valid dom attribute. If you don't want them, label the props something that won't output. Not saying to do this, but technically __myProps_fontSize is not going to output as <span __my-props_font-size="12px" />.