menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

How can I stop styled-components from passing some props to the DOM?

April 4, 2019 at 2:48pm

How can I stop styled-components from passing some props to the DOM?

April 4, 2019 at 2:48pm
I am using styled-system to add some responsiveness props like this to my styled components:
display={{ xs: "none", sm: "block" }}
But styled components passes the display prop to the DOM, so the rendered component has this attribute:
display="[object Object]"
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
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
I created a basic demo here:
I’m not sure how attrs would work since I’m trying to prevent some attrs to end up into the DOM
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
^^ 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" />.