![Cover image for [Styled Components, attrs] "@deprecated — Prefer using the new single function style, to be removed in v5"](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F8u7xtr5uxj6i5j3eol01.png)
Hi there!
I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪
I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩💻
What is this article about?
- styled components, attrs
- v5
Error log was from VS Code👇
@deprecated — Prefer using the new single function style, to be removed in v5
Who is this article for?
Anyone sees this error🚨
When did this error appear?
This error appeared when I was working on styled components attrs(attributes).
Of course, I took a look at their documentation first👍
Styled Components Docs: https://styled-components.com/docs/api#attrs
But it seems like VS Code detects spmething it's missing from the documentation🤔
How to solve?
I figured out the source.
Styled Components Spectrum: https://spectrum.chat/styled-components/general/object-form-attrs-keys-are-now-deprecated~2bd034a0-8464-4695-9f7f-98bdf37f9ff6
This source says, the syntax is wrong and must be updated.
Before
const Input = styled.input.attrs(props => ({
// 👇
type: 'text',
size: props.small ? 5 : undefined,
}))`
border-radius: 3px;
border: 1px solid palevioletred;
display: block;
margin: 0 0 1em;
padding: ${props => props.padding};
::placeholder {
color: palevioletred;
}
`
render(
<>
<Input small placeholder="Small" />
<Input placeholder="Normal" />
<Input padding="2em" placeholder="Padded" />
</>
)
After
const Input = styled.input.attrs(props => ({
// 👇
style: {
type: 'text',
size: props.small ? 5 : undefined,
}
}))`
border-radius: 3px;
border: 1px solid palevioletred;
display: block;
margin: 0 0 1em;
padding: ${props => props.padding};
::placeholder {
color: palevioletred;
}
`
render(
<>
<Input small placeholder="Small" />
<Input placeholder="Normal" />
<Input padding="2em" placeholder="Padded" />
</>
)
Top comments (0)