自定义颜色选择器，没有任何反应包

Question

picture here is the design can we able to implement color picker like this without any packages in react

是否可以使用 react 自定义颜色选择器，如上图（没有任何包）？我尝试了很多，但无法找到合适的解决方案。如果有人可以帮助提前谢谢。

点击这个图片链接https://i.stack.imgur.com/1RFki.pnghttps://i.stack.imgur.com/yloS2.png需要这样的设计

Answer 1

您可以在浏览器中使用内置的开发人员工具

Answer 2

You can use html tag of type 'color' as shown here.
如果这对您不起作用，您正在考虑自己编写颜色选择器逻辑。

<div>
    <input type="color" id="head" name="head"
           value="#e66465">
    <label for="head">HTML 'color' input</label>
</div>

Answer 3

Here is the solution for my question also you can run this solution on code sandbox.

谢谢大家:)

import React, { useState } from "react";
import styled from "styled-components";
import "./styles.css";

const Container = styled.span`
  display: inline-flex;
  align-items: center;
  width: 150px;
  max-width: 150px;
  padding: 4px 12px;
  border: 1px solid #bfc9d9;
  border-radius: 4px;

  input[type="color"] {
    margin-right: 8px;
    -webkit-appearance: none;
    border: none;
    width: auto;
    height: auto;
    cursor: pointer;
    background: none;
    &::-webkit-color-swatch-wrapper {
      padding: 0;
      width: 30px;
      height: 30px;
    }
    &::-webkit-color-swatch {
      border: 1px solid #bfc9d9;
      border-radius: 50px;
      padding: 0;
    }
  }

  input[type="text"] {
    border: none;
    width: 100%;
    font-size: 14px;
  }
`;

const ColorPicker = props => {
  return (
    <Container>
      <input type="color" {...props} />
      <input type="text" {...props} />
    </Container>
  );
};

export default function App() {
  const [state, updateState] = useState("#FFFFFF");

  const handleInput = e => {
    updateState(e.target.value);
  };

  return (
    <div className="App">
      <ColorPicker onChange={handleInput} value={state} />
    </div>
  );
}