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

object-form attrs({}) keys are now deprecated

November 29, 2018 at 11:26pm

object-form attrs({}) keys are now deprecated

November 29, 2018 at 11:26pm
I got the following code:
export const Progress = styled.div.attrs({
style: props => ({
width: `${props.progress * 100}%`
})
})`
background-color: #f3a42d;
height: 20px;
margin: 0;
`;
It complains to me that: object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition.
I tried to change the syntax but I couldn't make it work, because style attribute expect an object... Any idea?

November 29, 2018 at 11:42pm
I discovered that warning this morning -- converting what i was building to use the styled.div.attrs(props => ({})) syntax kept giving me "cannot read property of undefined" errors where attrs({}) worked fine. It may have been a syntax error on my end, but i dont think so.
I was actually planning on asking this question here tomorrow morning, you beat me to it :D
Edited
Should be something like :
styled.div.attrs(props => ({style:{width: `${props.progress * 100}%`}))
but that didn't work
Oh wait, it worked! ahahha... I don't what I did before, I had one set of curly brace too much
like-fill
3
export const Progress = styled.div.attrs(props => ({
style: { width: `${props.progress * 100}%` }
}))`
background-color: #f3a42d;
height: 20px;
margin: 0;
`;
like-fill
1
Here is the working code