바스키아
Styled-componts Document 훑어보기 본문
사실 CSS 외부처리기인 SASS가 편한지 스타일드 컴포넌츠가 편한지 사실 체감상 느껴지진 않는다.
방식만 다를뿐 취향차이라 생각한다....
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
-> 중요한점은 태그 템플릿 리터럴 문법을 이용하여 식을 표현하고, className으로 연결하는것이 아닌 컴포넌트를 입히는것이 포인트(컴포넌트와 스타일 간의 매핑을 제거)
*라이브러리 관련 버전 및 호환주의 확인을 하시구...
예시는 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import React from 'react';
import styled from 'styled-components';
// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
|
-->결국엔 <Wrapper>를 따로 css 스타일이 적용되는 컴포넌트로 생성후 사용하는것!
-> 컴포넌트 이름을 커스텀 할수도 있고 className같은 매핑을 안하여도되고 css파일을 따로 두지 않아도 된다...
지만.. 역시 취향차이라 생각된다...
Babel Macro
If you're using tooling that has babel-plugin-macros set up, you can switch to the styled-components/macro import path instead to gain the effects of the babel plugin without further setup.
|
1
2
3
4
5
6
7
8
9
|
import styled from 'styled-components/macro';
// A static className will be generated for Title (important for SSR)
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
|
If you wish to provide configuration options to the babel plugin similar to how you would in a .babelrc, see this guide. The config name is "styledComponents".
하지만 난 사용하지 않을것이다... 바벨을.....
생각보다 짧다.... 그냥 백탭을 사용하여 태그리터럴 문법을 사용한다는점 -> css매핑이 아닌 스크립트 형식의 component를 만들어 적용한다는것.... 역시 취향차이 아닐까 싶다.
https://github.com/styled-components/awesome-styled-components
이곳에 들어가면 styled-components 적용 설명 또는 예제가 나열되있으니 도움이 될듯하다. 끝