import styled, { css } from 'styled-components'
const complexMixin = css` 
 color: ${props => (props.whiteColor ? 'white' : 'black')};`
const StyledComp = styled.div`  /* This is an example of a nested interpolation */  ${props => (props.complex ? complexMixin : 'color: blue;')};`

함수로 넣어줄 경우 활용할 수 있습니다, 또 다른 활용법은 여러줄의 스타일을 넣어줄 경우!

6-1. 여러줄 추가해주기

import React from "react"
import styled, { css } from "styled-components"
const ButtonStyle = styled.button`  
padding: 10px 10px; 
 border-radius: 0.25rem;  
font-size: 1.5rem; 
border: 1px solid gray; 
 ${(props) =>    props.primary && 
css`      
color: white;    
background: blue;  
border-color: blue;  
  `}`function Button({ children, ...props })
 {  return <ButtonStyle {...props}>{children}</ButtonStyle>}

이런식으로,  primary를 값으로 받아오는 경우엔 props 를 받아서 기본 버튼 스타일링을 해줄 수 있습니다.