styled-jsx

• vercel/styled-jsx

警告

• 默认不支持传递样式到 children #573
  • .ment-item > a 如果 a 是在一个组件里，无法影响到
  • 使用 .menu-item > :global(a)
  • 或者传递 css.resolve 返回的 className 到子组件

import css from 'styled-jsx/css';

// 全局样式 - 不使用 className 限定
const body = css.global`
  body {
    margin: 0;
  }
`;

// babel-plugin-macros 可作为 babel macros
const { className, styles } = css.resolve`
  a {
    color: green;
  }
`;
export default () => (
  <div>
    <style jsx>{`
      /* 通过不修饰 a 影响子组件 */
      div > :global(a) {
        // 通过 styled-jsx-plugin-postcss 使用 postcss - 使用 tailwind
        @apply text-red;
      }
    `}</style>

    {/* 通过传递 className 影响子组件 */}
    <Link className={className}>About</Link>
    {styles}

    {/* 渲染 global */}
    <style jsx global>
      {body}
    </style>
  </div>
);

tailwind

• 启用后不会使用 SWC 编译 - 推荐使用 css module

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}