Next.js 中如何使用 styled-jsx？

推荐答案

在 Next.js 中使用 styled-jsx 非常简单，因为 styled-jsx 是 Next.js 默认支持的 CSS-in-JS 解决方案。你可以在组件中直接使用 <style jsx> 标签来编写样式，这些样式会自动限定在当前组件的作用域内。

// www.javascriptcn.com code example
function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <style jsx>{`
        h1 {
          color: blue;
        }
      `}</style>
    </div>
  );
}

export default MyComponent;

在这个例子中，h1 标签的样式只会应用到 MyComponent 组件中的 h1 元素，而不会影响到其他组件中的 h1 元素。

本题详细解读

1. styled-jsx 的基本用法

styled-jsx 是一个 CSS-in-JS 库，它允许你在 React 组件中直接编写 CSS 样式。Next.js 默认集成了 styled-jsx，因此你不需要额外安装或配置。

在组件中使用 styled-jsx 时，你只需要在 JSX 中插入 <style jsx> 标签，并在其中编写 CSS 样式。这些样式会自动限定在当前组件的作用域内，避免了全局样式污染的问题。

2. 动态样式

styled-jsx 还支持动态样式，你可以根据组件的 props 或 state 来动态生成样式。

// www.javascriptcn.com code example
function MyComponent({ isActive }) {
  return (
    <div>
      <h1>Hello, World!</h1>
      <style jsx>{`
        h1 {
          color: ${isActive ? 'green' : 'red'};
        }
      `}</style>
    </div>
  );
}

export default MyComponent;

在这个例子中，h1 标签的颜色会根据 isActive 属性的值动态变化。

3. 全局样式

如果你需要在 styled-jsx 中定义全局样式，可以使用 <style jsx global> 标签。

// www.javascriptcn.com code example
function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <style jsx global>{`
        body {
          margin: 0;
          padding: 0;
        }
      `}</style>
    </div>
  );
}

export default MyComponent;

在这个例子中，body 的样式会应用到整个页面，而不仅仅是当前组件。

4. 样式继承

styled-jsx 还支持样式继承，你可以通过 :global 选择器来继承父组件的样式。

// www.javascriptcn.com code example
function ParentComponent() {
  return (
    <div className="parent">
      <ChildComponent />
      <style jsx>{`
        .parent {
          color: blue;
        }
      `}</style>
    </div>
  );
}

function ChildComponent() {
  return (
    <div className="child">
      <p>Child Component</p>
      <style jsx>{`
        .child {
          color: inherit;
        }
      `}</style>
    </div>
  );
}

export default ParentComponent;

在这个例子中，ChildComponent 中的 .child 样式继承了 ParentComponent 中的 .parent 样式。

5. 样式模块化

styled-jsx 还支持样式模块化，你可以通过 css 函数将样式提取到单独的模块中。

// www.javascriptcn.com code example
import css from 'styled-jsx/css';

const styles = css`
  h1 {
    color: blue;
  }
`;

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <style jsx>{styles}</style>
    </div>
  );
}

export default MyComponent;

在这个例子中，样式被提取到 styles 变量中，然后在组件中使用。这种方式可以使样式更加模块化和可复用。

6. 样式优先级

styled-jsx 的样式优先级与普通的 CSS 样式优先级相同。你可以通过增加选择器的特异性或使用 !important 来提高样式的优先级。

// www.javascriptcn.com code example
function MyComponent() {
  return (
    <div>
      <h1 className="title">Hello, World!</h1>
      <style jsx>{`
        .title {
          color: blue !important;
        }
      `}</style>
    </div>
  );
}

export default MyComponent;

在这个例子中，.title 的样式优先级被提高，即使有其他样式定义了 h1 的颜色，.title 的样式也会生效。

7. 样式调试

styled-jsx 还提供了方便的样式调试功能。你可以在浏览器的开发者工具中查看每个组件的样式，并了解样式的来源和作用域。

8. 样式性能

styled-jsx 的样式是静态的，因此在构建时会被提取并优化，减少了运行时的性能开销。此外，styled-jsx 还支持服务器端渲染（SSR），确保了样式在服务器端和客户端的一致性。

9. 样式兼容性

styled-jsx 支持现代浏览器的所有 CSS 特性，并且可以通过 Babel 插件进行兼容性处理，确保在旧版浏览器中也能正常工作。

10. 样式扩展

styled-jsx 还支持通过插件扩展功能，例如支持 Sass、Less 等预处理器，或者支持 CSS Modules 等功能。

// www.javascriptcn.com code example
import css from 'styled-jsx/css';

const styles = css`
  h1 {
    color: blue;
  }
`;

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <style jsx>{styles}</style>
    </div>
  );
}

export default MyComponent;

在这个例子中，样式被提取到 styles 变量中，然后在组件中使用。这种方式可以使样式更加模块化和可复用。