rc//유행js-js 천국에서 스타일화된 구성 요소의 CSS 계단

Styled-Components 같은 좋은 소스 라이브러리를 사용하면 통상적으로 점점 더 많은 감상 효과를 가져올 수 있다.만약 네가 나처럼, 어느 정도 너는 배후에서 발생한 일에 대해 호기심을 느낄 것이다.최근에 Github 라이브러리의 스타일링 구성 요소를 검사하여 라이브러리를 사용할 때 어떤 일이 일어났는지 더 잘 알았습니다.네가 상상한 바와 같이 도서관은 매우 멋진 일을 많이 했기 때문에 첫 번째 시도에서 나는 나의 조사를 도서관의 실제 착안점에 국한시켰다.
스타일링 구성 요소 라이브러리를 사용하여 스타일링 구성 요소를 만드는 것은 매우 간단하다는 것을 기억하십시오...

const Button = styled.a`
    font-size: 14px;
`;

...아니면 그렇게

const BorderedButton = styled(Button)`
  border: 2px solid white;
`;

상기 예시에서 styled 함수의 차이를 어떻게 사용하는지 특히 주의하십시오.

우리는 astyled의 대상으로 하는 방법을 호출하여 이를 매개 변수

로 css를 전달한다

우리는 styled 함수를 호출하여 이전에 만든 스타일화된 구성 요소를 매개 변수로 전달하고 css를 다음 매개 변수로 추가합니다

그렇다면 도서관은 어떻게 우리에게 이런 공개 가능성을 제공했을까?어디 보자.

JS holy grail에서 styled라는 CSS

이론적으로 양식화된 구성 요소의 package.json 정보를 고려하면 라이브러리의 기술이 실행될 때 입구점은 src/index.js 파일이다.그러나 styled.js file은/src/constructors 디렉터리의 일부로 우리가 모든 멋진 일을 할 수 있는 실용적인 입구점이다.다음은 이 파일의 모양 (상태 2019년 1월, 분기 호스트) 입니다.

간단히 말하면 이 파일은 다음과 같은 작업을 수행합니다.

일부 내부 수입(2-4행)

인용 함수의 1const styled개 성명(8행)

forEach 루프 1개(회선 11-13)

마지막으로 우리 성배의 출구styled🎉 (15 행)

양식화 함수 및 함수 대상 방법

그 제목에 곤혹스러워?기억해라, 자바스크립트에서 함수는 대상이다!따라서 개발자는 이 함수 대상에 방법을 추가함으로써 이를 활용할 수 있다.스타일화된 구성 요소와 styled.js 되돌아오는 실제 입구점은 이 점을 대량으로 사용했다.여덟 번째 줄은 인용 함수의 const styled 성명을 보여 줍니다. 잠시 후에 더 소개할 것입니다.이제 styled 상수 인용 함수가 생성되었다는 것을 기억하십시오.지금 특별히 11에서 13줄을 보세요.

우리는 forEach 순환이 하나array of defined domElements.를 교체하는 것을 보았다. 매번 교체할 때마다dom 요소의 이름을 교체하는 방법을 styled 함수 대상에 추가한다.봐라!이것은dom 원소 방법을 boss처럼 styled 함수 대상에 연결하는 첫 번째 부지런한 작업의 구성 요소 공장이다.모든 추가 방법의 주체는 styled 함수 호출 결과입니다. 이 함수 호출은 모든dom 노드에서 정확하게 구축된 구성 요소 구조 함수를 되돌려줍니다.실행할 때 이 점에 도달하면 우리는 우리의 코드 라이브러리에서 이러한 추가 방법을 호출할 수 있다.

const Button = styled.a`
    ...this will be the method argument in the form of css to the styled.a call...
`;
const Container = styled.div`
    ...this will be the method argument in the form of css to the styled.div call...
`;

지금까지 우리는 스타일화된 구성 요소를 사용하는 코드 라이브러리에서 styled.a 또는 styled.div 을 사용할 때 어떤 일이 일어날지 알고 있다.즉, 우리는 이미 반쯤 가서 어떤 스타일의 베일을 벗었다는 것이다.js는 우리를 위해 수출한다.내가 쓴 "8행은 인용 함수 const styled 성명을 보여 주었지만, 이따가 더 많은 내용이 있을 것입니다."를 기억하십니까?우리는 짝의 베일을 벗기기 위해 이 함수에 대해 더 많은 토론을 해야 한다.시작합시다.

스타일 함수: 어떻게 구성하고 분포하는가

구조와 분포?맞다
여덟 번째 줄에서 보듯이 styled 자체는 하나의 함수로 성명되었다.그것은 미국 개발자가 사용하는 함수 styled 의 분포식 기본적으로 직접 호출을 내보내거나, 위에서 말한 내부 구조가 필요한 함수 대상 호출을 통해 호출된다.구체적으로 말하자면 이것은 우리에게 다음과 같은 의미를 가진다.

이것

const Container = styled('div')` ...css... `;

그리고 이거.

const Container = styled.div` ...css... `

반환은 동일합니다.그러나 기억하십시오: 우리는 코드 라이브러리에서 두 번째 옵션을 편리하게 사용할 수 있습니다. 스타일화된 구성 요소는 적당한 구성 요소 구조 함수를 구축하고 내부에서 첫 번째 옵션을 실행하여 함수 대상 방법을 추가할 수 있기 때문입니다(여기:.div.styled 함수는 tag 을 매개 변수로 하고 호출 함수constructWithOptions (8 줄) 의 결과를 되돌려줍니다. 이 함수는 두 개의 매개 변수를 수신합니다.

StyledComponent 함수 -
너는 알아차렸니? 지금까지 나는 이 문장에서 언급한 적이 없다React.자, 시작합시다.양식화 구성 요소는 React 생태계의 일부라는 것을 잊지 마라.따라서, 이 StyledComponent 매개 변수는 실제적으로 React 구성 요소를 만드는 데 사용되며, React 이벤트 처리 프로그램과 React가 우리에게 해 주는 모든 멋진 일에 접근할 수 있도록 합니다.

우리가 tag 함수에 전달한 styled -
파라미터의 형식은 Target입니다.dom 노드 문자열이나 설정된 스타일의 구성 요소입니다.흐름 정의Target 유형의 소스를 어떻게 사용하는지 검사this line합니다.tag 매개 변수는 constructWithOptions에게만 전달되며 수정할 필요가 없습니다.

이 두 개의 매개 변수를 받았습니다. constructWithOptions() 함수는 다른 함수를 되돌려줍니다. 스타일화된 구성 요소를 만듭니다. 이 구성 요소는 코드 라이브러리에서 사용하고 싶은 tag 을 고려했습니다.가장 기본적인 형식으로 되돌아오는 함수를 사용합니다. 우리가 유일하게 전달해야 할 것은 태그 템플릿 문자 파라미터의 순수한 css입니다.자바스크립트의 이 부분이 어떻게 작동하는지 자세히 알고 싶으면 this post of Max Stoiber 를 보십시오.
그래서 styled.js의 순환을 끝내야 한다...이제 우리는 양식화 함수가 되돌아오는 내용과 그것이 어떻게 분포되거나 내부 구조에 사용되는지 알게 되었고, 함수 대상 방법의 서로 다른 방법체의 작용도 더욱 잘 이해하게 되었다.styledstyled 12행의 styled.a로 실행됩니다.js는 "표기 미리 정의"스타일의 구성 요소 구조 함수를 나누어 주었습니다!🎉

Thx 읽기용!

보시다시피 styled(domElement) 많은 것을 제공했습니다.한편으로는 함수이고, 다른 한편으로는 대상이며, 모든dom 노드에 미리 정의된 방법을 제공하여 스타일화된 구성 요소를 구축한다.내가 보기에, 라이브러리가 우리를 위해 구성 요소를 설계하는 데 제공한 이런 방법은 순금이다.
나는 이 문장이 네가 어떤 풍격을 더욱 잘 이해하는 데 도움을 줄 수 있기를 바란다.js의 역할과 우리가 사용할 수 있는 것을 어떻게 공개하는지.모든 정보는 2019년 1월 이전에 스타일링된 구성 요소의 주요 지점을 기반으로 합니다.만약 내가 주의하지 못한 변화가 있다면, 언제든지 저에게 연락해서 이 게시물을 업데이트해 주십시오.
이 게시물은 originally posted here 입니다.