Styled-Component 에서 active 제어

Styled-Component에서 active 요소를 주고 싶을 때 className으로 제어해도 되고, props로 제어해도 된다. 

 

props로 제어

isActive의 값에 따라서 ? : 삼항연산자를 활용해서 사용하는거라 한 눈에 확인하기가 어렵다는 단점이 있다.

 

const TabAnchor = styled.button<{ isActive: boolean }>`
	border: ${(props) => (props.isActive ? `1px solid #333333` : `0px`)};
`;

 

 

className으로 제어

: 코드가 깔끔해진다.

import styled from "@emotion/styled";

const TabAnchor = styled.button`
  border: 0px;

  &.isActive {
    border: ${({ theme }) => `1px solid ${theme.colors.black}`};
  }
`;

const Example = (tabIndex:number) => {
  const tabList = ["A", "B", "C"];
  return (
    <Tab>
      {tabList.map((item, i) => {
        return (
          <TabAnchor
            key={i}
            className={ isActive: tabIndex === i }
          >
            {item}
          </TabAnchor>
        );
      })}
    </Tab>
  );
};

 

 

 

출처

https://sezzled.tistory.com/entry/styled-components%EC%97%90%EC%84%9C-classNames-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-props%EC%97%90-%EB%94%B0%EB%A5%B8-CSS-%EA%B9%94%EB%81%94%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

styled-components에서 classNames 사용해서 props에 따른 CSS 깔끔하게 사용하기