Coding Apple, React 강좌 내용 정리.12 - styled-components

styled-components

component가 많아지면 css도 관리가 어려워짐 (css in js)

동일한 이름의 class를 넣는다던지 등

 

먼저 설치해보기

npm install styled-components

...

import styled from 'styled-components'

 

컴포넌트에 직접 스타일넣어서 스타일링하기

className 작명 필요없음

// css를 미리 입려놓은 컴포넌트?
let 박스 = styled.div`
  padding : 20px;
  border-style: ridge;      
`;
let 제목 = styled.h4`
  font-size: 25px;
  font-weight: 800;
`;

---
<박스>
	<제목>상세페이지</제목>
</박스>

적용 화면

호불호가 갈린다고 한다. 어차피 선택 사항이다.

 

props 를 이용해서 매개변수 전달이 가능하다

function Detail(props) {

   let 제목 = styled.h4`
      font-size: 25px;
      color : ${props => props.색상}
   `;

---

<제목 색상="blue">Detail</제목>

 

SASS (CSS 대신에 사용할 수도)

설치부터 하자 [  npm install node-sass ]

css를 프로그래밍언어스럽게 작성가능한 언어로 이해한다.

브라우저는 SASS이해할수없기에 CSS로 컴파일해야 한다.

(node-sass 설치하면 알아서 해준다)

 

src 폴더에 Detail.js 를 만든데에 이어서 Detail.css 도 만들어두자. (Detail.js 꾸미기 용도로)

일반적인 적용 방법 (.css 파일로 적용하기)

(Detail.js 파일 내에)

import './Detail.css';

<제목 className="red">상세페이지</제목>

(Detail.css 파일)
.red {
    color: red;
}

 

SASS 문법을 쓰고싶다면,  파일 확장자를 .SCSS 로 바꾸고,

import './Detail.scss' 로 바꾼다

 

1. 변수에 데이터를 저장해서 쓰자

$변수명 : 변수 값

(Detail.scss)

$메인컬러 : #ff0000;
.red {
    color: $메인컬러;
}

 

2. @import 파일 경로 ( 기본 css 문법이긴하다만)

다른 css파일을 가져올 때

// 미리 reset.scss를 만둘어둔다
(_reset.scss)
body {
    margin: 0;
}
div {
    box-sizing: border-box;
}

(Detail.scss)
@import './reset.scss';

 

3. nesting (셀렉터 대신에 사용 가능)

// Ex)
div.container h4 {
    color: blue;
}
div.container p {
    color: green;;
}

위 코드를 수정해서

div.container {
    h4 {
        color: blue;
    }
    p {
        color: blue;
    }
}

 

4. @extent

.my-alert {
    background-color: lightgray;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
}

이와 같은 css 내용이 있고,

대부분같온 background-color만 다른게 있다고 하자 (green, red 등 등)

.my-alert-green , .my-alert-red 이렇게 만들지 말고

.my-alert-red {
    @extend .my-alert;
    background-color: red;
}

@extent [기본이 될 class 이름]

바꿔야 할 부분만 추가해서 넣어주면 된다

 

5. @mixin / @include

@mixin newFunc() {
    background-color: lightgray;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
}
.my-alert-new {
    @include newFunc();
}

@mixin 이름() { .. } 을 만들고, 위에 즉 이미 선언해놓고

 

만들 class 에

@include  새로운_css {

   @include 이름();

}