styled-components에서 props 활용법 완벽 정리!

 

styled-components에서 props를 사용하는 것은 컴포넌트의 동적인 스타일을 적용하는 데 유용한 방법이다.

이를 통해 CSS 값을 컴포넌트의 속성(props)에 따라 변경할 수 있다.

---

기본 사용법

styled-components는 React의 props를 활용하여 스타일링을 동적으로 조정할 수있도록 지원한다.

CSS속성 값에 함수 형태로 접근해, props를 활용하여 조건부 스타일을 설정한다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: ${(props) => (props.primary ? 'white' : 'black')};
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
`;

// 사용 예시
function App() {
  return (
    <>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </>
  );
}

export default App;

 

---

복잡한 조건 처리

props에 따라 다양한 조건을 적용할 수 있다. 논리 연산자와 객체를 사용해 복잡한 스타일을 지정할 수 있다.

const Card = styled.div`
  background-color: ${(props) => (props.active ? 'lightgreen' : 'lightgray')};
  border: 2px solid ${(props) => (props.active ? 'green' : 'gray')};
  padding: 20px;
  text-align: center;
`;

function App() {
  return (
    <>
      <Card active>Active Card</Card>
      <Card>Inactive Card</Card>
    </>
  );
}

 

 

---

props로 값을 전달하기

css 속성 값 자체를 props로 전달할 수도 있다.

이 경우, 값이 유연하게 조정 가능하다.

const Box = styled.div`
  width: ${(props) => props.width || '100px'};
  height: ${(props) => props.height || '100px'};
  background-color: ${(props) => props.bgColor || 'skyblue'};
`;

function App() {
  return (
    <>
      <Box width="200px" height="150px" bgColor="coral" />
      <Box />
    </>
  );
}

 

---

함수형 스타일 적용

props를 통해 특정 css 속성을 결정하는 함수를 정의할 수도 있다.

const getBorderRadius = (props) => {
  if (props.rounded) return '50%';
  if (props.sharp) return '0px';
  return '5px';
};

const StyledDiv = styled.div`
  background-color: ${(props) => props.bgColor || 'tomato'};
  border-radius: ${getBorderRadius};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <>
      <StyledDiv rounded bgColor="skyblue" />
      <StyledDiv sharp bgColor="lime" />
      <StyledDiv />
    </>
  );
}

 

---

 

prps로 Theme 연동

styled-components는 ThemeProvider를 활용해 전역적인 테마를 설정할 수 있다.

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: 'blue',
    secondary: 'gray',
  },
};

const Button = styled.button`
  background-color: ${(props) => props.theme.colors.primary};
  color: white;
  padding: 10px 20px;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Theme Button</Button>
    </ThemeProvider>
  );
}

 

ThemeProvider로 제공된 theme객체를 props.theme로 접근해 스타일을 지정한다.