如何在 NextJS 中添加颜色选择器？

在 NextJS 中添加颜色选择器可以提供更好的用户体验，并且可以让用户更方便地自定义页面的颜色。

以下是在 NextJS 中添加颜色选择器的步骤：

1. 安装所需依赖

我们将使用 react-color 库来实现颜色选择器。因此，需要先安装依赖：

npm install react-color --save

2. 创建一个颜色选择器组件

在 pages 目录中创建一个名为 ColorPicker.js 的文件，并添加以下代码：

import React, { useState } from "react";
import { ChromePicker } from "react-color";

function ColorPicker() {
  const [color, setColor] = useState("#000000");

  const onChangeColor = (newColor) => {
    setColor(newColor.hex);
  };

  return (
    <>
      <ChromePicker color={color} onChange={onChangeColor} />
      <style jsx>{`
        div {
          position: absolute;
          top: 20px;
          right: 20px;
        }
      `}</style>
    </>
  );
}

export default ColorPicker;

这个组件可以呈现一个 Chrome 风格的颜色选择器，在用户选择颜色时，将新颜色的十六进制值存储在组件的内部状态中。

3. 将组件添加到页面中

在 pages 目录中的任何页面中，将 ColorPicker 组件添加到页面中：

import ColorPicker from "../components/ColorPicker";

function MyPage() {
  return (
    <>
      <div>My Page</div>
      <ColorPicker />
    </>
  );
}

export default MyPage;

现在打开页面，就应该可以看到一个颜色选择器在页面的右上角。

代码片段

import React, { useState } from "react";
import { ChromePicker } from "react-color";

function ColorPicker() {
  const [color, setColor] = useState("#000000");

  const onChangeColor = (newColor) => {
    setColor(newColor.hex);
  };

  return (
    <>
      <ChromePicker color={color} onChange={onChangeColor} />
      <style jsx>{`
        div {
          position: absolute;
          top: 20px;
          right: 20px;
        }
      `}</style>
    </>
  );
}

export default ColorPicker;