스타일 컴포넌트는 스타일이 포함된 리액트 컴포넌트를 만드는 것
- 장점
- 당연히 css나 scss파일을 만들 필요가 없음.
- className을 고민할 필요도 없고, 모든 것을 자바스크립트로 해결
스타일 컴포넌트 초기셋팅 참고사이트
npm install --save styled-components
import React from 'react';
import styled from 'styled-components';
// styled 다음엔 그냥 html 태그는 적으면 됩니다. 그리고 ``을 사용해서 css 코드를 그대로 적었습니다 따옴표가 아니가 백틱!!
const Wrapper = styled.div`
height: 500px
background-color: black;
border-radius: 10px;
color: black;
`
const App = () => (
<Wrapper>첫번째 스타일 </Wrapper>
);
export default App;
// Theme .js
const Theme = {
successColor: "#27ae60",
failColor:"#e74c3c"
}
export default Theme;
import React from 'react';
import styled from 'styled-components';
import Theme from './theme';
// APP.js
const Wrapper = styled.div`
height: 500px
background-color: black;
border-radius: 10px;
color: ${Theme.successColor};
`
const App = () => {
return (
<Wrapper>글자색이 변했습니다.</Wrapper>
);
};
export default App;
import React from 'react';
import styled from 'styled-components';
import Theme from './theme';
const App = () => {
const Wrapper = styled.div`
height: 500px
background-color: black;
border-radius: 10px;
color: ${Theme.successColor};
`
return (
<Wrapper>글자색이 변했습니다.</Wrapper>
);
};
export default App;