TIL-40 React Styled Components πŸ’…

ssxst31Β·2021λ…„ 9μ›” 18일
0

React

λͺ©λ‘ 보기
9/22
post-thumbnail

μ™œ Styled Componentsλ₯Ό μ¨μ•Όν• κΉŒ?

  • CSS 클래슀 λͺ…에 λŒ€ν•œ 고민은 μ—¬μ „ν•˜λ‹€.
    • ex. BEM (.block__element--modifier, button button--state-success)
  • 정해진 κ°€μ΄λ“œκ°€ μ—†μœΌλ©΄ ꡬ쑰가 λ³΅μž‘ν•΄μ§„λ‹€.
  • λ°©λŒ€ν•œ μŠ€νƒ€μΌ μ •λ³΄λ‘œ μΈν•œ 슀크둀 지μ˜₯도 쑴재
  • μ—¬μ „νžˆ CSS 클래슀둜 쑰건뢀 μŠ€νƒ€μΌλ§μ„ ν•˜κ³  μžˆλ‹€.
  • CSS 클래슀둜 쑰건뢀 μŠ€νƒ€μΌλ§μ„ ν•˜λ”λΌλ„ 동적인 λ³€ν™”λ₯Ό ν‘œν˜„ν•˜κΈ°μ— ν•œκ³„κ°€ μžˆλ‹€
    - ex. 1μ΄ˆμ— px 값을 1μ”© 증가 β†’ Inline μŠ€νƒ€μΌμ— 의쑴
    render(
    <div>
      <Button>Normal</Button>
      <Button 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;
    `;

# Nesting


```js

render(
  <>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">
			<span className="contents">The sun is shining...<span>
		</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </>
)

const Thing = styled.div`
  color: blue;

  &:hover {
    color: red;
  }

  #id {
		div {
	    background: orange;
		}
  }

  .something-else & {
    border: 1px solid;
  }
`
profile
μ‚¬μš©μž μž…μž₯μ—μ„œ μ‚¬μš©μžκ°€ μ›ν•˜λŠ” 것을 κ°œλ°œν•˜λŠ” ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžμž…λ‹ˆλ‹€.

0개의 λŒ“κΈ€