overrides-example-internal.js

// Autocomplete.js
import React from 'react';
import * as defaultComponents from './styled-elements';

class Autocomplete extends React.Component {

  // Setup & handlers omitted to keep this example short
  
  getSharedStyleProps() {
    const {isOpen, isError} = this.state;
    return {
      $isOpen: isOpen
      $isError: isError
    };
  }

  render() {
    const {isOpen, query, value} = this.state;
    const {options, overrides} = this.props;

    const {
      Root: {component: Root, props: rootProps},
      Input: {component: Input, props: inputProps},
      List: {component: List, props: listProps},
      Option: {component: Option, props: optionProps},
    } = getComponents(defaultComponents, overrides);

    const sharedProps = this.getSharedStyleProps();

    return (
      <Root {...sharedProps} {...rootProps}>
        <Input 
          type="text"
          value={query} 
          onChange={this.onInputChange}
          {...sharedProps}
          {...inputProps}
        />
        {isOpen && (
          <List {...sharedProps} {...listProps}>
            {options.map(option => {
              <Option
                onClick={this.onOptionClick.bind(this, option)}
                $option={option}
                {...sharedProps}
                {...optionProps}
              >
                {option.label}
              </Option>
            })}
          </List>
        )}
      </Root>
    );
  }
}