import React , { Component } from 'react' ; import Select , { components , ValueContainerProps } from 'react-select' ; import { ColourOption , colourOptions } from '../data' ; const ValueContainer = ( { children , ... props } ) => ( < components . ValueContainer { ... props } > { children } < /components.ValueContainer>); export default class CustomControl extends Component { render ( ) { return ( < Select defaultValue = { colourOptions [ 0 ] } isClearable styles = { { singleValue : ( base ) => ( { ... base , color : 'white' } ) , valueContainer : ( base ) => ( { ... base , background : colourOptions [ 2 ] . color , color : 'white' , width : '100%' , } ) , } } components = { { ValueContainer } } isSearchable name = "color" options = { colourOptions } / > ) ; } }