StyleProtocols.jsx

// #########################################
// protocols/listlike.jsx
// #########################################
import { Root, Children, conforms, ProtocolStyle } from 'style-protocol'
import Listable from 'protocols/listable'

export default class Listlike extends HierarchyProtocol {
  hierarchy() {
    return (
      <Root>
        <Child is={conforms([Listable])} count="*"></Child>
      </Root>
    )
  }
  where(state) {
    return state.scrollable
  }
}

// #########################################
// components/my-list.jsx
// #########################################
import Listlike from 'protocols/Listlike'
import ListItem from './ListItem'

const initialState = {
  scrollable: true
}

const myStyle = {
  'overflow': 'scroll',
  'height': '100%'
}

@conforms([{
  protocol: Listlike,
  style: myStyle
}])
class MyModal extends Component {
  constructor(state = initialState) {
    //…
  }  
  render() {
    let cells = this.props.stuff.map(item => {
      return (
        <ListItem>{item.name}</ListItem>
      )
    })
    return (
      <div>
        {cells}
      </div>
    )
  }
}