问题描述
TL;DR
如何将包含一个或多个 CSS 规则的变量插入到 styled-jsx 中(在后台使用 styled-jsx-plugin-sass)?
我有以下 JSX 样式:
// src/pages/index.tsx
...
<style jsx>
{`
.test {
height: 100vh;
width: 100vw;
background-color: green;
${contained}
}
`}
</style>
而 contained
是一个变量,我试图将提到的规则插入其中:
// src/styles/break.ts
export const contained = `
margin: 0 auto;
${breakAt("sm")(`
width: calc(100% - 10vw);
`)}
${breakAt("md")(`
width: calc(100% - 15vw);
`)}
@media screen and (min-width: calc(960px + 10vw)) {
width: 960px;
}`;
...
注意事项:
breakAt
是生成特定媒体查询 (breakpoint: string) => (content: string) => string
我已确保正确配置 styled-jsx-plugin-sass
- 按预期以原始行为编写生成的 CSS。
我还研究了我认为 styled-jsx 的行为方式 - 它似乎对我在编写生成器((content: string) => string
作用于 contained
)时输入的代码进行了一些文字解析,并且调用它,解析器识别出我写了一个 CallExpression
,但因此未能呈现任何内容。
我知道这可以使用 @mixin/@include
解决,但我目前正在挑选我喜欢的 Sass 功能(主要是嵌入式规则),并且很想知道有什么可能。
非常感谢您的输入和更正。 请在回答前阅读完整的问题!
解决方法
我不是 styled-components
的粉丝(但!)但在这种情况下似乎是有效的情况:
import styled from "styled-components"
// ... other imports
const Wrapper = styled.div`
/* ... scoped styles */
${contained} /* mixin */
`
export default SomeComponent({ children }) {
return <Wrapper>This component was mixed in<Wrapper/>
}