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

Posted 2023-03-15

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

【英文标题】：how can I use nested css template literals in styled-components, emotion

【发布时间】：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 模板文字中的模板文字吗？

【参考方案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: 有效；)