问删除样式组件输入周围的填充

EN

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

const Container = styled.span`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  border-radius: 4px;
  margin: 0px;
  padding: 0px;

  input[type="color"] {
    border: 1px solid var(--main-grey);
    outline: none;
    border-radius: 8px;
    width: 50%;
    margin-left: 5px;
    font-size: 12px;
    font-family: Poppins;
    padding: 0px;
    -webkit-appearance: none;
    width: auto;
    height: auto;
    cursor: pointer;
    background-color: white;
    margin:
    &::-webkit-color-swatch-wrapper {
      margin:-100px;
      padding: 0px;
   
      border: none;
      overflow: none;
    }
    &::-webkit-color-swatch {
      padding: 18px;
      border:none;
      border-radius: 8px;

      margin: 0px;
      
    }
  }

  input[type="text"] {
    border: 1px solid var(--main-grey);
    outline: none;
    border-radius: 8px;
    width: 50%;
    margin-left: 5px;
    padding-left: 12px;
    margin-top: 0px;
    font-size: 14px;
    font-family: Poppins;
  }
`;

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

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

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

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