[React] Styled Component
これまでcss作業はSSASによって行われてきた.cssからSASSへの移行に便利さを感じ、SSASからstyledコンポーネントへの移行の働き方に疑問が多い.逆に最初はもっと気分が悪くなった.しかし、もっと深く使えば、もっと良い技術だと感じます.
styled-component??
styled-component?? // styled-components 라이브러리에서 import 해온 styled라는 객체를 이용한다
// 아래와 같이 h1 태그를 만들어 Title이라는 스타일드 컴포넌트를 만들 수 있습니다
import styled from 'styled-components'
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
// html 태그 이름 뒤 Tagged Templete 문법을 활용해 CSS 속성을 정의하고 있다
//Templete Literals 문법(``)의 확장이라고 생각해도 좋다
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
Adapting based on props
最も基本的で、最もよく使われるプロジェクトです.
次のコードのprimaryとwidth部分をpropsと呼びます.render(
<div>
<Button>Normal</Button>
<Button primary width="100">Primary</Button>
</div>
);
// 만약 Button 컴포넌트에 전달된 props(width)가 200 미만(조건)이면
// 삼항연산자 true : "palevioletred"
// 삼항연산자 false : "white"
const Button = styled.button`
background: ${props => props.width < 200 ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
Extending Styles
これは既存の属性を継承する概念です.
よく使う属性を使うときに使うのがいいです.render(
<div>
<Button>Normal Button</Button>
<TomatoAnchorButton>Tomato Button</TomatoAnchorButton>
</div>
);
// The Button from the last section without the interpolations
const Button = styled.div`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// A new component based on Button, but with some override styles
// Button의 속성을 상속 받아 새로운 anchor 태그를 생성
const TomatoAnchorButton = styled(Button.withComponent("a"))`
color: tomato;
border-color: tomato;
`;
Reference
この問題について([React] Styled Component), 我々は、より多くの情報をここで見つけました
https://velog.io/@jooneybadger/TIL-No.36-React-Styled-Component
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
// styled-components 라이브러리에서 import 해온 styled라는 객체를 이용한다
// 아래와 같이 h1 태그를 만들어 Title이라는 스타일드 컴포넌트를 만들 수 있습니다
import styled from 'styled-components'
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
// html 태그 이름 뒤 Tagged Templete 문법을 활용해 CSS 속성을 정의하고 있다
//Templete Literals 문법(``)의 확장이라고 생각해도 좋다
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
render(
<div>
<Button>Normal</Button>
<Button primary width="100">Primary</Button>
</div>
);
// 만약 Button 컴포넌트에 전달된 props(width)가 200 미만(조건)이면
// 삼항연산자 true : "palevioletred"
// 삼항연산자 false : "white"
const Button = styled.button`
background: ${props => props.width < 200 ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
<div>
<Button>Normal Button</Button>
<TomatoAnchorButton>Tomato Button</TomatoAnchorButton>
</div>
);
// The Button from the last section without the interpolations
const Button = styled.div`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// A new component based on Button, but with some override styles
// Button의 속성을 상속 받아 새로운 anchor 태그를 생성
const TomatoAnchorButton = styled(Button.withComponent("a"))`
color: tomato;
border-color: tomato;
`;
Reference
この問題について([React] Styled Component), 我々は、より多くの情報をここで見つけました https://velog.io/@jooneybadger/TIL-No.36-React-Styled-Componentテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol