如何在样式组件，情感中使用嵌套的CSS模板文字

问题描述

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

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

我可以使用嵌套在另一个CSS模板文字中的css模板文字吗？

解决方法

更容易的是，您可以使用简单的模板字符串：

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

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