React-Native CSS

import React from "react"

const btnStyle = {
  color: "white",
  background: "teal",
  padding: ".375rem .75rem",
  border: "1px solid teal",
  borderRadius: ".25rem",
  fontSize: "1rem",
  lineHeight: 1.5,
}

function Button() {
  return <button style={btnStyle}>Inline</button>
}

Inline Style

React 컴포넌트에 CSS 인라인스타일을 바로 적용하는것

 

중요특징

• style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당되야 합니다.
• CSS 속성명이 케밥 케이스(kebab case)이 아닌 카멜 케이스(camel case)로 작성되야 합니다.

존재하지 않는 키워드값(ex: 1rem)은 자바스크립트에서는 없어서 스트링 값으로 만들어줘야됨 ""

font-size는 fontSize처럼 카멜케이스로 바꿔줘야됨

 

Button.css

.btn {
  color: white;
  background: teal;
  padding: 0.375rem 0.75rem;
  border: 1px solid teal;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

import React from "react"
import "./Button.css"

function Button() {
  return <button className="btn">External</button>
}

External Stylesheet

외부의 css파일을 임포트 한다 엘리먼트의 className 속성으로 스타일을 맵핑시켜줌(ex. Bootstrap)

 

import React from "react"
import styles from "./Button.module.css"

function Button() {
  return <button className={styles.btn}>Module</button>
}

export default Button

CSS Modules

css파일에 고유 네임스페이스를 부여해주는 기법

 

중요특징

• 외부 스타일 시트를 작성할 때, .css 확장자가 아닌 .module.css 확장자를 사용해야 합니다.
• React 컴포넌트 파일에서 임포트할 때, 임포트된 CSS 모듈의 이름을 명시적으로 지정해줍니다. (import modlue_name from "./my/style.module.css";)
• 엘리먼트의 className 속성을 할당해줄 때, 해당 클래스가 어느 CSS 모듈 소속인지 알려줍니다. (module_name.class_name)

Button.module.css 파일을 생성하고 Button.css 파일의 내용을 그대로 복붙한다

Button.module.css파일을 임포트할때 CSS 모듈명을 styles 라고 지정해준다

그리고 버튼 엘리먼트 className 속성에, 그냥 btn 말고 styles.btn 을 넘겨줘야된다

 

헷갈리는거있으면 여기들어가서보기

출처 www.daleseo.com/react-styling/