최근에 Vue에서 React로 전환했습니다(추가 정보here.Vue에서 나는 구식 스타일의 라벨로 순수한 CSS를 작성한 적이 있다.이제 React로 넘어가면서 다른 것을 체험하고 싶어서 해보기로 했습니다styled-components.솔직히 말하면, 지금까지 나는 매우 좋아했다.그것은 재구성하고 확장하기 쉬운 유지보수 스타일을 유지하는 데 도움이 된다.유일한 단점은 그들의 도구 시스템을 과도하게 사용하면 당신의 스타일이 읽을 수 없고 혼란스러워질 수 있다는 것이다.이것이 바로 내가 CSS 사용자 정의 속성(변수)을 좋아하는 이유입니다. 이것은 당신의 CSS를 깨끗하고 깨끗하게 유지하는 데 도움을 줍니다. 특히 주제와 관련이 있을 때!

CSS 사용자 정의 속성

It's just like any other variable system you know

CSS 사용자 정의 속성은 일반적으로 전체 응용 프로그램에서 다시 사용할 수 있는 값을 포함하는 CSS 변수라고 합니다.이것은 네가 알고 있는 어떤 다른 변수 시스템과 같다.그것들은 94.75%의 브라우저 시장 점유율에서 지원되기 때문에 심지어 생산에 투입될 수 있다.
사용자 정의 속성을 정의하는 것은 CSS 속성을 설정하는 것과 같습니다. 유일한 차이점은 -- 을 접두사로 사용해야 한다는 것입니다.

:root {
  --theme-primary: #F5005E;
}

위의 예시에서 나는 theme-primary 이라는 새로운 사용자 정의 속성을 초기화하고 그 값을 #151618 로 설정했다.:root 위조 클래스는 특정 범위뿐만 아니라 전체 문서에서 새로운 사용자 정의 속성을 사용할 수 있도록 하는 데 사용된다.
이제 theme-primary 를 사용하려면 CSS 함수 var 를 사용할 수 있습니다.실제 상황을 살펴보겠습니다.
더 많이 읽으십시오check out MDN docs.

CSS 사용자 정의 속성 및 스타일링 구성 요소 도구

CSS custom properties will keep your code clean and readable while styled-components props are much more flexible

CSS 사용자 정의 속성이 무엇인지 파악했습니다.하지만 스타일링 구성 요소에도 도구 시스템이 하나 있다.그렇다면 우리는 어떤 것이 우리에게 더 적합한지 어떻게 결정합니까?간단히 말하면, CSS 사용자 정의 속성은 코드를 깨끗하고 읽을 수 있게 유지하고, 스타일화된 구성 요소 도구는 더욱 유연하게 유지한다.우리 깊이 연구합시다.
한편, 우리는 CSS 사용자 정의 속성을 가지고 있으며, 이것은 당신에게 모든 기존의 CSS 기능을 제공합니다.변수는 자동으로 다운스트림의 하위 요소로 전달됩니다. 더 구체적인 규칙으로 덮어쓰고 다른 CSS 속성처럼 동적으로 변경할 수 있습니다.스타일링도 깔끔하고 우아하게 유지됩니다(잠시 후 상세히 소개합니다).그러나 결국 그들은 밧줄일 뿐, 너는 그것들로 어떤 화려한 일도 할 수 없다.
한편, 스타일화된 구성 요소 도구는 자바스크립트의 강력한 기능을 사용한다.다른 JavaScript 변수와 마찬가지로 사용할 수 있으며 그에 따라 스타일을 변경할 수 있습니다.사용자 이벤트에 반응할 수 있습니다. 반응 구성 요소 도구 설정 값, 검증, 설정 유형에 따라 기본적으로 무엇이든지 가능합니다.문제는 도구를 읽는 스타일이 훨씬 어려워 최종 패키지가 더 크다는 점이다.
테마 속성은 프로그램의 모든 구성 요소에 접근할 수 있는 정적 설정입니다.이것은 CSS 사용자 정의 속성의 완벽한 용례입니다.주제를 전달하는 것은 무료이며, 우리는 어떤 복잡한 규칙도 검증하거나 적용할 필요가 없다.

스타일 어셈블리 글로벌 스타일

스타일 구성 요소는 범위화된 스타일을 가진 구성 요소를 만드는 데 집중합니다.그러나 때때로 우리는 모든 구성 요소에 대해 전역 스타일을 적용해야 한다.예를 들어 브라우저의 기본 스타일을 재설정하거나 우리의 경우 전역 테마를 적용해야 합니다.
이를 위해, 우리는helper 함수createGlobalStyle를 사용할 수 있다.스타일링 구성 요소 및 createGlobalStyle 를 사용하여 이전 예제를 업데이트합니다.

지원 항목

우리는 거의 완성했다. 이것은 과정 중의 마지막 단계이다.여기서 우리는 배운 모든 것을 통합하여React 응용 프로그램에 유지보수 가능한 테마 시스템을 만들 것입니다.
테마를 만들기 위해서는 여러 값을 사용하여 동일한 CSS 사용자 정의 속성을 여러 번 설정해야 합니다.예를 들어 우리는 짙은 색 테마 (우리의 기본 테마) 와 연한 색 테마가 있다.기본적으로 암흑 값은 :root 위조 요소에서 설정되고 밝은 값은 html.light 에서 설정할 수 있습니다.html 요소가 라이트 클래스를 열면 기본값을 덮어씁니다.
우리 그것의 실제 행동을 좀 봅시다!
이게 얼마나 쉬운지 봐라!사용자 정의 속성이 바뀌면 모든 구성 요소에 자동으로 전파됩니다.
비교를 하기 위해서, 나는 내장된 해결 방안의 양식화된 구성 요소를 사용하여 같은 프레젠테이션을 만들었다.(자세한 정보click here
내가 보기에 이런 실현에는 두 가지 결점이 있다.우선, 나는 그것의 가독성과 우아한 해결 방안을 발견했다. 왜냐하면 그것은 너무 많은 문자열 삽입값과 관련이 있기 때문이다.그 다음에 스타일화된 구성 요소가 prop의 모든 값에 클래스를 만들 때 출력 묶음이 더 커집니다.테마를 전환하는 동시에 DevTools를 열면 button 클래스가 바뀌는 것을 볼 수 있습니다.
하루가 끝날 때, 당신이 어떤 해결 방안을 더 좋아하는지 결정하세요.옳고 그름의 구분이 없다.

보상: 주제 변경

너는 이미 성공했어, 이것은 괜찮은 보상이야.매끄럽게 UI 변경 사항을 변환하는 것이 항상 좋습니다. 주제에 대해서도 마찬가지입니다.우리가 해야 할 일은 전환을 추가하기 위해 테마를 바꾸는 것이다.이것은 모든 속성이 순조롭게 전환되는 것을 확보할 것이다.경우에 따라 성능 문제가 발생할 수 있으므로 조심해서 사용하십시오.
이게 다야!나는 네가 성공해서 매우 기쁘다.Let me know what you think
Daily 라벨을 추가할 때마다 가장 좋은 프로그램 뉴스를 제공할 수 있다.우리는 당신이 미래를 해독할 수 있도록 수백 개의 합격원을 배열할 것입니다.