styled-components

ํฌ๋กฑยท2023๋…„ 5์›” 29์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
7/18

๐Ÿ’– ์ผ๋‹จ ์„ค์น˜

  1. npm install styled-components
  1. ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ jsํŒŒ์ผ ์œ„์—
    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>
  )
}

๐Ÿ˜ props๋กœ ์žฌํ™œ์šฉ๊ฐ€๋Šฅ

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>
  )
}

(์ฐธ๊ณ ) ์ปดํฌ๋„ŒํŠธ๋ช….module.css

์—ฌ๋Ÿฌ๋ถ„์ด App.css ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ App.js์—์„œ importํ•ด์„œ ์“ด๋‹ค๊ณ  ํ•ด๋„
๊ฑฐ๊ธฐ ์ ์€ ํด๋ž˜์Šค๋ช…๋“ค์€ Detail.js๊นŒ์ง€ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. (์˜ค์—ผ๋จ)
ํ”„๋กœ์ ํŠธ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ž‘์„ ๋• ํŽธ๋ฆฌํ•˜๊ฒ ์ง€๋งŒ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ปค์ง€๋ฉด ๊ด€๋ฆฌํ•˜๊ธฐ ํž˜๋“ค์–ด์ง‘๋‹ˆ๋‹ค.

๊ทธ๋Ÿด ๋• styled-components ์จ๋„ ๋˜์ง€๋งŒ ๊ทธ๋ƒฅ CSSํŒŒ์ผ์—์„œ๋„ ๋‹ค๋ฅธ JS ํŒŒ์ผ์— ๊ฐ„์„ญํ•˜์ง€ ์•Š๋Š” '๋ชจ๋“ˆํ™”' ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š”๋ฐ

์ปดํฌ๋„ŒํŠธ๋ช….module.css
์ด๋ ‡๊ฒŒ CSS ํŒŒ์ผ์„ ์ž‘๋ช…ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ปดํฌ๋„ŒํŠธ๋ช….js ํŒŒ์ผ์—์„œ import ํ•ด์„œ ์“ฐ๋ฉด ๊ทธ ์Šคํƒ€์ผ๋“ค์€ ์ปดํฌ๋„ŒํŠธ๋ช….js ํŒŒ์ผ์—๋งŒ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

profile
๐Ÿ‘ฉโ€๐Ÿ’ป์•ˆ๋…•ํ•˜์„ธ์š”๐ŸŒž

0๊ฐœ์˜ ๋Œ“๊ธ€