npm install styled-components
import styled from 'styled-components'
์ฌ๊ธฐ ์ ์ ์คํ์ผ์ด ๋ค๋ฅธ JS ํ์ผ๋ก ์ค์ผ๋์ง ์์ต๋๋ค.
์๋ ๊ทธ๋ฅ App.cssํ์ผ์ ์ค์ผ๋ฉ๋๋ค.
import styled from 'styled-components';
let Box = styled.div`
padding : 20px;
color : grey
`;
let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 10px;
`;
function Detail(){
return (
<div>
<Box>
<YellowBtn>๋ฒํผ์</YellowBtn>
</Box>
</div>
)
}
import styled from 'styled-components';
let Btn = styled.button`
background : ${ props => props.bg };
color : ${props => props.bg == 'blue' ? 'white':'black'};
//์ด๋ฐ์์ผ๋ก ๊ฐ๋จํ ํ๋ก๊ทธ๋๋ฐ๊ฐ๋
padding : 10px;
`;
//๊ธฐ์กด style ๋ณต์ฌ ๊ฐ๋.
let NewBtn = styled.button(Btn)`
border: none;
`
function Detail(){
return (
<div>
<Btn bg="orange">์ค๋ ์ง์ ๋ฒํผ์</YellowBtn>
<Btn bg="blue">ํ๋์ ๋ฒํผ์</YellowBtn>
</div>
)
}
์ฌ๋ฌ๋ถ์ด App.css ํ์ผ์ ๋ง๋ค์ด์ App.js์์ importํด์ ์ด๋ค๊ณ ํด๋
๊ฑฐ๊ธฐ ์ ์ ํด๋์ค๋ช
๋ค์ Detail.js๊น์ง ์ฌ์ฉ๊ฐ๋ฅํฉ๋๋ค. (์ค์ผ๋จ)
ํ๋ก์ ํธ ์ฌ์ด์ฆ๊ฐ ์์ ๋ ํธ๋ฆฌํ๊ฒ ์ง๋ง ์ฌ์ด์ฆ๊ฐ ์ปค์ง๋ฉด ๊ด๋ฆฌํ๊ธฐ ํ๋ค์ด์ง๋๋ค.
๊ทธ๋ด ๋ styled-components ์จ๋ ๋์ง๋ง ๊ทธ๋ฅ CSSํ์ผ์์๋ ๋ค๋ฅธ JS ํ์ผ์ ๊ฐ์ญํ์ง ์๋ '๋ชจ๋ํ' ๊ธฐ๋ฅ์ ์ ๊ณตํ๋๋ฐ
์ปดํฌ๋ํธ๋ช
.module.css
์ด๋ ๊ฒ CSS ํ์ผ์ ์๋ช
ํ๋ฉด ๋ฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ปดํฌ๋ํธ๋ช .js ํ์ผ์์ import ํด์ ์ฐ๋ฉด ๊ทธ ์คํ์ผ๋ค์ ์ปดํฌ๋ํธ๋ช .js ํ์ผ์๋ง ์ ์ฉ๋ฉ๋๋ค.