如何解决样式化组件 - 带有嵌套类的 css 变量
这是代码沙箱的链接 - https://codesandbox.io/s/misty-shadow-lr4tv?file=/src/App.js
知道为什么在模板文字中嵌套 div 无法正常工作吗?我的问题的概述是:
- 选项 1:使用
css
标记(从样式组件导入)存储css
和嵌套类并在父级的 css 中返回的常量不起作用。但是,这是我实现此目的的理想方式。 - 选项 2:在父级的 css
styled.div
中存储和返回的常量 - 选项 3:常量存储为基本模板文字,前面没有
css
或使用父级 css 之外的任何主题变量并在父级 css 作品中返回
以下是我尝试过的 3 个有效/无效的示例:
import styled,{ css } from 'styled-components/macro'
export const ExampleDiv = styled.div``
/**
* Option 1
* Does not work
*/
const expandedStyles1 = css`
${ExampleDiv} {
background-color: ${({ theme }) => theme.background.primary};
}
`
export const Option1 = styled.div<ItemProps>`
${({ $isExpanded }) => {
return `${$isExpanded && expandedStyles1}`
}}
`
/**
* Option 2
* Does work
*/
export const Option2 = styled.div<ItemProps>`
${({ $isExpanded }) => {
const expandedStyles2 = `
${ExampleDiv} {
background-color: ${({ theme }) => theme.background.primary};
}
`
return `${$isExpanded && expandedStyles2}`
}}
`
/**
* Option 3
* Does work
*/
const expandedStyles3 = `
${ExampleDiv} {
background-color: gree;
}
`
export const Option3 = styled.div<ItemProps>`
${({ $isExpanded }) => {
return `${$isExpanded && expandedStyles3}`
}}
`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。