prop-based-styles.js

import React from 'react';
import styled from 'styled-components';

// By default, the Text component will render
// to the dom as a <p> tag.
const Text = styled.p`
  color: ${({ color, theme }) => theme.color[color]};
  font-size: ${({ size }) => size}px;
  font-weight: ${({ weight }) => weight};
  line-height: ${({ lineHeight, size }) => lineHeight || size + 8}px;
`;

Text.defaultProps = {
   color: 'text',
   size: 16,
   weight: '500',
};

// Below we pass "h1" to render the Text as a
// heading, whilst maintaining the style definition. 
// Under the hood, styled-components just passes 
// the generated className prop to the `as` element.
// This means you can also pass in a react component
// like so <Text as={MyOtherTextComponent} />.
export default () => {
  return (
    <div>
      <Text color="primary" as="h1" size={24}>Title</Text>
      <Text>Paragraph</Text>
    </div>
  ); 
};