nextjs - jsx 스타일의 학습 기록

범위

전반적인 상황

<스타일 글로벌 jsx> {` 
  .hero { 
    폭 : 100 %; 
    색상 : # 333; 
  } 
  .title { 
    여백 : 0; 
    폭 : 100 %; 
    패딩 탑 : 80 픽셀; 
    라인 높이 : 1.15; 
    폰트 사이즈 : 48px; 
  } 
`} </ 스타일>

범위를 호스트

<DIV 클래스 이름 = "루트"> 
    <스타일 jsx> {` 
      .root { 
        색상 : 녹색; 
      } 
    `} </ 스타일> 
  </ DIV>

일회성 (만 글로벌 CSS에 대한) 글로벌

'반응-선택'에서 가져 오기를 선택합니다 
수출 디폴트 () => ( 
  <DIV> 
    <선택 optionClassName이 = "반응 - 선택"/> 

    <스타일 jsx> {` 
      / * 접두사 될 것 "DIV"하지만, ".react-선택 "하지 않습니다 * / 

      DIV : 글로벌 (.react-선택) { 
        색상 : 빨강 
      } 
    `} </ 스타일> 
  </ DIV> 
)

동적 스타일

① 행 sytle

CONST 버튼 = ({패딩, 어린이}) => ( 
  <버튼 스타일 = {{패딩}}> 
     {어린이} 
     <스타일 jsx> { ' 
        버튼 { 
          패딩 : 20 픽셀, 
          배경 : #eee; 
          색상 : # 999 
        } 
     `} </ 스타일> 
  </ 버튼> 
)

② 클래스 이름 스위치

CONST 버튼 = (소품) => ( 
  <버튼 클래스 명 => {&& 소품에서 '큰'큰 '} 
     {props.children} 
     <스타일 jsx> {' 
        버튼 { 
          패딩 : 20 픽셀, 
          배경 : #eee; 
          색상 : # 999 
        } 
        .large { 
          패딩 : 50 픽셀 
        } 
     `} </ 스타일> 
  </ 버튼> 
)

③ jsx 스타일 변수

CONST 버튼 = (소품) => ( 
  <버튼> 
     {props.children} 
     <스타일 jsx> { ' 
        버튼 { 
          패딩 : $ {소품에서'큰 ''50 ''20 '} 픽셀;? 
          배경 : $ {소품 .theme.background}; 
          색상 : # 999; 
          디스플레이 인라인 블록; 
          폰트 크기 : 1em; 
        } 
     `} </ 스타일> 
  </ 버튼> 
)

또는 (일정 JS를 통해 직접 소개)

'../theme'에서 가져 오기 {색상, 간격} 
'../theme/utils'에서 가져 오기 {invertColor} 

= CONST 버튼 = ({어린이})> ( 
  <버튼> 
     {어린이} 
     <스타일 jsx> {` 
        버튼 { 
          패딩 : $ {spacing.medium}; 
          배경 : $ {colors.primary}; 
          색상 : $ {invertColor (colors.primary)}; 
        } 
     `} </ 스타일> 
  </ 버튼> 
)

(233)　

nextjs - jsx 스타일의 학습 기록

추천