[Styled Component - 7] &

&기호는 styled-components에서 사용되는 특별한 문법 중 하나입니다. 

&를 사용하여 현재 스타일링 중인 컴포넌트를 참조할 수 있습니다. 

이를 통해 CSS 선택자와 유사한 방식으로 스타일을 적용할 수 있습니다.

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  
  /* 기본 상태 스타일 */
  background-color: #fca311;
  color: #ffffff;
  border: none;
  
  &:hover {
    /* 호버 상태 스타일 */
    background-color: #ffba08;
  }
  
  &:active {
    /* 액티브 상태 스타일 */
    background-color: #e85d04;
  }
  
  &:disabled {
    /* 비활성 상태 스타일 */
    background-color: #e0e0e0;
    cursor: not-allowed;
  }
`;

&는 styled-components에서 강력한 기능 중 하나이며,

다양한 CSS 선택자와 함께 사용하여 특정 상황에 맞는 스타일을 적용할 수 있습니다.

 

&에 대한 기호 해석은 "자기 자신" 라고 해석하면 쉽습니다!

import styled from 'styled-components';

const Card = styled.div`
  background-color: #fca311;
  padding: 20px;
  border-radius: 4px;
  
  &:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    
    & h2 {
      color: #ffba08;
    }
  }
  
  & h2 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 10px;
  }
`;

function Example() {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>This is a sample card component.</p>
    </Card>
  );
}