styled-component 가상요소 content 속성 prop 전달

가상요소의 content 에 string prop을 넘겨주고 싶을 때

styled-component 가상요소의 content에 넘겨준 string이 적용되지 않는 문제

const Div = styled.div`
  // ...
  &::after {
    content: ${({ state }) => state};
    display: block;
  }
`;

// ...

// state = '테스트' 가 들어온다고 가정
const Example = ({children, state, ...props }) => {
  return (
    <Div state={state} {...props}>
      {children}
    </Div>
  );
};

위의 경우 가상요소 after의 content 로 state 문자열이 제대로 출력될 줄 알았지만, 출력되지 않았다.

---

dataset을 통한 해결

• data-속성을 넘겨주어 attr()을 통해 받아올 수 있는 방법으로 해결하였다.

const Div = styled.div`
  // ...
  &::after {
    content: attr(data-name);
    display: block;
  }
`;

// ...

// state = '테스트' 가 들어온다고 가정
const Example = ({children, state, ...props }) => {
  return (
    <Div data-name={state} {...props}>
      {children}
    </Div>
  );
};

---

최선의 방법은 아니라고 생각되어 더 나은 해결법을 고민중에 있다.
왜 prop을 통해 넘어간 string이 제대로 출력되지 않는지 명확하게 파악해봐야겠다.