[Styled Components, attrs] "@deprecated — Prefer using the new single function style, to be removed in v5"

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" />
  </>
)