如何在 styled-jsx 中呈现自定义生成的规则集

Question

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 is a function that generates a specific media query (breakpoint: string) => (content: string) => string

I have ensured that styled-jsx-plugin-sass is configured correctly - writing the generated CSS in raw acts as intended.

I've also looked into how I believe styled-jsx behaves - it seems to do some literal parsing of the code I put in as I wrote a generator ((content: string) => string acting on contained) and called it, and the parser recognised that I wrote a CallExpression, but failed to render anything because of that.

I understand that this could be solved using @mixin/@include but I'm picking and choosing features of Sass that I like at this point (mainly embedded rules), and was curious to see what was possible.

非常感谢您的输入和更正。 请在回答前阅读完整问题！

Answer 1

我不是 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/>
}

如何在 styled-jsx 中呈现自定义生成的规则集

How to render custom generated ruleset in styled-jsx

javascript

sass

reactjs

next.js

styled-jsx

TL;DR