Nested components

There's no reason you can't nest <Styled> components.

Here we're creating an Input component. It can also create its own InputLabel component. The user doesn't render an InputLabel (we do that for you), but they can override the InputLabel's styles in the master theme.

const staticInputStyle = {
  padding:  '9px 10px',
  border:   '1px solid #ddd',
  ':focus': {
    borderColor: 'blue',
    outline:     'none'
  }
};

const staticLabelStyle = {
  fontSize:   '12px',
  fontWeight: 'bold'
};


export default class Input extends Component {

  // event handlers and lifecycle methods are omitted for clarity

  render() {

    return (
      <Styled
        themeName   = 'Input'
        staticStyle = {staticInputStyle}
        {...this.props}
      >
        {(className, props) => {
          const {label, ...otherProps} = props;
                inputEl = <input {...otherProps} className={className} />;

          if (label) {
            return (
              <Styled
                themeName   = 'InputLabel'
                staticStyle = {staticLabelStyle}
              >
                {labelClassName => (
                  <label>
                    <span className = {labelClassName}>{label}</span>
                    {inputEl}
                  </label>
                )}
              </Styled>
            );
          }
          else
            return inputEl;
        }}
      </Styled>
    );
  }
}