JavaScript styled-components div Examples

Example #1

File: _app.js Project: broccolini/broccolini.github.com

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { fontFamily, lineHeight, color } from 'styled-system'
import { theme } from '../components'

const Typography = styled.div([],
  fontFamily,
  lineHeight,
  color
)
Typography.defaultProps = {
  font: '0',
  lineHeight: 1.5,
  color: 'black'
}

export default ({ render }) =>
  <ThemeProvider theme={theme}>
    <Typography>
      {render()}
    </Typography>
  </ThemeProvider>

Example #2

File: Root.js Project: heshanfu/mdx-docs

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { ThemeProvider } from 'styled-components'
import { MDXProvider } from '@mdx-js/tag'
import get from 'lodash.get'
import defaultComponents from './components'
import defaultTheme from './themes/base'

const Typography = styled.div([],
  props => ({
    fontFamily: props.theme.font,
    lineHeight: props.theme.lineHeight,
    color: get(props.theme, 'colors.text'),
    backgroundColor: get(props.theme, 'colors.background'),
  })
)

export default class Root extends React.Component {
  static propTypes = {
    theme: PropTypes.object,
    components: PropTypes.object,
  }

  static defaultProps = {
    theme: defaultTheme
  }

  render () {
    const {
      theme = {},