修改反应颜色选择器设计

问题描述

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

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

解决方法

对于 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;

,

您可以使用 CSS 隐藏下半部分。

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

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

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