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

【问题标题】：how can I use nested css template literals in styled-components, emotion如何在样式组件、情感中使用嵌套的 css 模板文字
【发布时间】：2021-01-03 02:29:05
【问题描述】：

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 模板文字中的模板文字吗？

【问题讨论】：

标签： css reactjs styled-components emotion

【解决方案1】：

更简单的是你可以使用一个简单的模板字符串：

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

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

【讨论】：

非常感谢您的回答。我应该知道的一件事是如何使用带有嵌套 css 的模板字符串。
@jay1234 与之前的css 相同（就像你一样）。但请注意，colors: 无效，但 color: 有效；)