我最终实现了自己的ColorControl. 我对这个解决方案不满意，我不建议你盲目地走这条路。然而，如果你想完成这项工作，又不想花两个小时在可能不像我那样存在的事情上，那就来吧。

安装两个额外的软件包：

npm install styled-components colord

import React from \'react\'

const {
  BaseControl,
  Dropdown,
  ColorPicker,
  Button
} = wp.components;

import styled from\'styled-components\';
import { colord } from \'colord\';

const DropWrapper = styled.div`
  margin-top: 8px;
`;

const ColorButton = styled(Button)`
  background-color: ${props => props.value};
  color: ${props => colord(props.value).isLight() ? \'#1e1e1e\' : \'#fff\'};
  min-width: 150px;
`;

const ColorControl = (props) => (
  <BaseControl
    label={props.label}
  >
    <DropWrapper>
      <Dropdown
        renderContent={() => (
          <ColorPicker
            color={props.value}
            onChangeComplete={color => props.onChange(color.hex)}
          />
        )}
        renderToggle={ ( { isOpen, onToggle } ) => (
          <ColorButton
            aria-expanded={ isOpen }
            aria-haspopup="true"
            onClick={ onToggle }
            aria-label={ `${props.label} color picker` }
            value={ props.value }
          >
            { props.value }
          </ColorButton>
        ) }
      />
    </DropWrapper>
  </BaseControl>
);

export default ColorControl;