React에서 CSS를 코딩하는 3가지 방법

반응형

리액트에 익숙해지는 것은 곰이 될 수 있다. 일단 편안해지면... 안타깝게도 구성요소에 선형 스타일링을 제공하는 방법을 알고 있다는 보장은 없습니다.

CSS는 리액트에서 복잡한 프로세스가 될 수 있다.

1. 스타일시트

리액트에서 CSS를 구현하는 가장 눈에 띄는 방법은 .css 스타일시트이다. 탐색이 가장 쉽지만, 특히 CSS에 익숙한 경우 대규모 응용 프로그램에서 상당히 빠르게 복잡해질 수 있으며 탐색 및 참조가 어려울 수 있습니다.

 

.css 스타일시트의 또 다른 잠재적인 단점은 부트스트랩/시맨틱 UI에 대해 매우 특정한 문제에서 상호 작용한다는 것이며, CSS가 기본값을 재정의하도록 하는 것은 당신이 더 구체적이 되도록 하는 것을 요구하거나, 또는 항상 최선의 방법은 아닌 !중요한 를 사용하는 것을 요구한다.

2. 인라인 스타일링

제가 좋아하는 인라인 스타일링은 들여쓰기와 햄버거식 HTML 요소만 신경 쓴다면 꽤 잘 정리할 수 있습니다.

인라인 스타일링에는 몇 가지 규칙이 있습니다.

<label style={
      color: '#C1BBDA', 
      fontSize: '20px', 
      fontFamily: 'shizuru'}
>
    NAME
</label>

 

이 예에서 볼 수 있듯이 스타일 코드는 JSX에 있는 HTML 요소에 직접 추가됩니다. 여는 태그(또는 주 태그(자체 구분인 경우) 내부에 style={}을(를) 추가합니다. 여기서 괄호 외부 집합은 JSX를 나타냅니다. CSS를 나타내는 대괄호 안에 다음과 같은 규칙을 사용하여 CSS 스타일을 추가합니다.

• 콜론(colon)은 색상과 같이 `색상:
• 스타일링에 여러 단어가 있는 경우 전통적인 CSS 스타일시트 형식 대신 낙타 케이스를 사용합니다. 글꼴 크기는 글꼴 크기 대신 인라인 스타일링에 사용됩니다.
• : 뒤에 오는 모든 스타일링은 문자열로 묶입니다. 즉, 색상: #C1BBDA (16진수 코드는 따옴표 안에 있음)
• 여러 스타일이 적용될 경우 스타일 사이에 쉼표를 구현해야 합니다. 적용된 각 스타일 사이에 쉼표가 있는 위의 예제를 참조하십시오.

3. 스타일-구성 요소

리액트에 CSS를 적용하는 것의 마지막 대안은 스타일링된 부품입니다. 스타일링된 구성요소를 사용하려면 다음 구성요소로 가져와야 합니다.

상사 수입품에서 온 수입품.

 

일단 구성요소로 가져오면, 스타일링된 구성요소에 대한 구문은 앞의 두 가지 예제와 약간 다릅니다. 구성요소의 기능 외부에 HTML 요소 스타일을 선언합니다.

const div = styled.div`
  margin-top:40px;
    margin-bottom:20px

    ```

    변수를 선언하고 style로 설정합니다.${someHTMLelement} 바로 뒤에 급성/백티크/왼쪽 따옴표가 있습니다. 다음 줄에서, 의 들여쓰기 코드는 콜론과 세미콜론 형식을 가진 스타일시트 CSS와 매우 유사합니다. 스타일링을 모두 적용했으면 스타일링된 구성요소의 끝선은 위와 같이 첨삭/뒤꿈치/왼쪽 따옴표로 끝나야 합니다.

    신고 후 스타일링된 구성요소를 호출하는 것은 Response 프로그램의 다른 위치에서 가져온 구성요소를 호출하는 것과 매우 유사합니다. 예를 들어, 위의 스타일 구성 요소를 코드화하기 위해 다음을 사용합니다.

    [Div][Div]

    <div class="content-ad"></div>

    (다른 구성요소와 마찬가지로 대문자로 표시해야 합니다.)