how can I use nested css template literals in styled-components, emotion

Question

const someStyle = css`
  colors : ${({theme}) => theme.colors.primary; 
  ${(props) => props.active ? css`
   background-color: ${({theme}) => theme.colors.backgroundColorActive};
  `}
`

const SomeButton = styled.div`
  ${someStyle} 
`

Can I use css template literals nested in another css template literals?

Answer 1

Even easier you can just use a simple Template strings:

const someStyle = `
  color: ${({theme}) => theme.colors.primary; 
  ${(props) => props.active ? `
   background-color: ${({theme}) => theme.colors.backgroundColorActive};
  `}
`

const SomeButton = styled.div`
  ${someStyle} 
`