index.js

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'

export const Base = ({
  value,
  children,
  ...props
}) =>
  <React.Fragment>
    {React.Children.toArray(children)
      .map(child => typeof child === 'string' ? (
        <div {...props}>{child}</div>
      ) : (
        React.cloneElement(child, props)
      )
    )}
  </React.Fragment>

export const create = prop => styled(Base)([],
  props => props.value ? ({
    [prop]: props.value
  }) : null
)

export const FontSize = create('fontSize')
export const Color = create('color')
export const BackgroundColor = create('backgroundColor')
export const Margin = create('margin')
export const Padding = create('padding')

export default props =>
  <BackgroundColor value='black'>
    <Color value='tomato'>
      <Padding value='32px'>
        <FontSize value='32px'>
          Hi
        </FontSize>
      </Padding>
    </Color>
  </BackgroundColor>