Close button style doesn't match example / no way to modify with props

[chriskonopka]

Using the complicated example I'm looking to create draggable and closable tabs.
While having succeded in doing this, the close button appears to always have a gray square background.

Looking through the code, it seems that the CloseButton cannot be modified by passing props into the tab component so I'm not sure how to fix besides coping the codebase and making the tweaks myself.

would like a way to modify the close button via props or a fix to the gray square appearing in my example.

including my example file below in case I am missing something:

const makeData = (number, titlePrefix = 'Tab') => {
  const data = [];
  for (let i = 0; i < number; i++) {
    data.push({
      title: `${titlePrefix} ${i}`,
      content:
        <div>
          Content {i}: Accusamus enim nisi itaque voluptas nesciunt repudiandae velit. <br/>
          Ad molestiae magni quidem saepe et quia voluptatibus minima. <br/>
          Omnis autem distinctio tempore. Qui omnis eum illum adipisci ab. <br/>
        </div>
    });
  }
  return data;
}

class tabView extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleTabChange = this.handleTabChange.bind(this);
    this.handleTabSequenceChange = this.handleTabSequenceChange.bind(this);
    const tabs = makeData(3, 'DragTab');
    this.state = {
      activeIndex: 0,
      tabs
    }
  }

  handleEdit = ({type, index}) => {
    this.setState((state) => {
      let {tabs, activeIndex} = state;
      if (type === 'delete') {
        tabs = [...tabs.slice(0, index), ...tabs.slice(index + 1)];
      }
      if (index - 1 >= 0) {
        activeIndex = index - 1;
      } else {
        activeIndex = 0;
      }
      return {tabs, activeIndex};
    });
  }

  handleTabChange(index) {
    this.setState({activeIndex: index});
  }

  handleTabSequenceChange({oldIndex, newIndex}) {
    const {tabs} = this.state;
    const updateTabs = simpleSwitch(tabs, oldIndex, newIndex);
    this.setState({tabs: updateTabs, activeIndex: newIndex});
  }

  render() {
    const {tabs, activeIndex} = this.state;
    const tabsTemplate = [];
    const panelTemplate = [];
    tabs.forEach((tab, index) => {
      const closable = tabs.length > 1;
      tabsTemplate.push(<DragTab key={index} closable={closable}>{tab.title}</DragTab>)
      panelTemplate.push(<Panel key={index}>{tab.content}</Panel>)
    })
    return (
      <Tabs activeIndex={activeIndex}
            onTabEdit={this.handleEdit}
            onTabChange={this.handleTabChange}
            onTabSequenceChange={this.handleTabSequenceChange}
            customStyle={themes["bootstrap"].style}
            >
        <DragTabList>
          {tabsTemplate}
        </DragTabList>
        <PanelList>
          {panelTemplate}
        </PanelList>
      </Tabs>
    )
  }
}
export default tabView;