Styled-Components: Readable style

styled-component-styled-component-readable.jsx

import styled, { css } from 'styled-components'

// Readable Style
const style = css`
  list-style: none;
  
  li {
    margin-bottom: 7px;
  }
`

const UnorderedList = styled(({  children, ...rest }) => (
  <ul {...rest}>
    { children }
  </ul>
))`
  ${style}
`

export default () => (
  <UnorderedList>
    <li>...<li>
  </UnorderedList>
)