修改反应颜色选择器设计答案

【问题标题】：Modify react color picker design修改反应颜色选择器设计
【发布时间】：2021-05-03 05:23:30
【问题描述】：

您好，我正在使用紧凑型 React 颜色选择器。问题是默认大小不是根据我的页面设计。所以我想删除颜色选择器的某些部分。

我想剪掉下半部分。但是我找不到可以修改的代码或文件。

【问题讨论】：

查看这个链接prereact.com/react-color-picker-npm-package，它有很多颜色选择器的设计。选择您需要的并在您的应用程序中对其进行编码。你提到的契约的代码也在那里。

【解决方案1】：

对于 Compact Picker，您可以将以下代码修改为您的应用。

import React from 'react';
import { CompactPicker } from 'react-color';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      background: '#ecf1f5',
     }
  }
  handleChangeComplete = (color) => {
    this.setState({ background: color.hex});
  };

  render(){
    return (
      <div className="App ">
        <CompactPicker color={ this.state.background }onChange={ this.handleChangeComplete }/>
      </div>
    );}
}

export default App;

【讨论】：

【解决方案2】：

您可以使用 CSS 隐藏下部。

这样的事情应该可以工作：

.compact-picker .flexbox-fix {
   display: none;
}

注意请检查您的应用程序中的类名并正确放置它们。我从他们的在线演示页面上看到了我的。

【讨论】：