[Styled Components, attrs] "@deprecated — v5에서 제거될 새로운 단일 함수 스타일을 선호합니다."
독일에 거주하는 프리랜서 풀스택 개발자 아리사입니다🇩🇪
실습 프론트엔드 전자책과 튜터링이 있는 온라인 학교Lilac를 개발 중입니다👩💻
이 기사는 무엇에 관한 것입니까?
오류 로그는 VS Code👇에서 가져왔습니다.
@deprecated — Prefer using the new single function style, to be removed in v5
이 기사는 누구를 위한 것입니까?
누구에게나 이 오류가 표시됩니다🚨
이 오류는 언제 나타 났습니까?
이 오류는 스타일 구성 요소 attrs(attributes)에서 작업할 때 나타났습니다.
물론 그들의 문서를 먼저 살펴봤습니다👍
Styled Components Docs: https://styled-components.com/docs/api#attrs
하지만 VS Code가 문서에서 누락된 spmeth를 감지하는 것 같습니다🤔
해결 방법?
나는 출처를 알아 냈다.
Styled Components Spectrum: https://spectrum.chat/styled-components/general/object-form-attrs-keys-are-now-deprecated~2bd034a0-8464-4695-9f7f-98bdf37f9ff6
이 소스는 구문이 잘못되었으며 업데이트해야 한다고 말합니다.
전에
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" />
</>
)
후에
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" />
</>
)
Reference
이 문제에 관하여([Styled Components, attrs] "@deprecated — v5에서 제거될 새로운 단일 함수 스타일을 선호합니다."), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/arisa_dev/styled-components-attrs-deprecated-prefer-using-the-new-single-function-style-to-be-removed-in-v5-2l76
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이 오류는 스타일 구성 요소 attrs(attributes)에서 작업할 때 나타났습니다.
물론 그들의 문서를 먼저 살펴봤습니다👍
Styled Components Docs: https://styled-components.com/docs/api#attrs
하지만 VS Code가 문서에서 누락된 spmeth를 감지하는 것 같습니다🤔
해결 방법?
나는 출처를 알아 냈다.
Styled Components Spectrum: https://spectrum.chat/styled-components/general/object-form-attrs-keys-are-now-deprecated~2bd034a0-8464-4695-9f7f-98bdf37f9ff6
이 소스는 구문이 잘못되었으며 업데이트해야 한다고 말합니다.
전에
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" />
</>
)
후에
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" />
</>
)
Reference
이 문제에 관하여([Styled Components, attrs] "@deprecated — v5에서 제거될 새로운 단일 함수 스타일을 선호합니다."), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/arisa_dev/styled-components-attrs-deprecated-prefer-using-the-new-single-function-style-to-be-removed-in-v5-2l76
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Styled Components Spectrum: https://spectrum.chat/styled-components/general/object-form-attrs-keys-are-now-deprecated~2bd034a0-8464-4695-9f7f-98bdf37f9ff6
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" />
</>
)
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" />
</>
)
Reference
이 문제에 관하여([Styled Components, attrs] "@deprecated — v5에서 제거될 새로운 단일 함수 스타일을 선호합니다."), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/arisa_dev/styled-components-attrs-deprecated-prefer-using-the-new-single-function-style-to-be-removed-in-v5-2l76텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
