SHARE
TWEET

Untitled

a guest Oct 13th, 2017 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import styled, { css } from 'styled-components'
  4. import { font, palette } from 'styled-theme'
  5.  
  6. const fontSize = ({ level }) => `${0.75 + (1 * (1 / level))}rem`
  7.  
  8. const styles = css`
  9.   font-family: ${font('primary')};
  10.   font-weight: 500;
  11.   font-size: ${fontSize};
  12.   margin: 0;
  13.   margin-top: 0.85714em;
  14.   margin-bottom: 0.57142em;
  15.   color: ${palette({ grayscale: 0 }, 1)};
  16. `
  17.  
  18. const Heading = styled(({ level, children, reverse, palette, theme, ...props }) =>
  19.   React.createElement(`h${level}`, props, children) // 去JSX化
  20.   // React.createElement(component, props, ...children)                    
  21. )`${styles}`
  22. // const Heading = styled.html-Tag ``
  23.  
  24. Heading.propTypes = {
  25.   level: PropTypes.number,
  26.   children: PropTypes.node,
  27.   palette: PropTypes.string,
  28.   reverse: PropTypes.bool,
  29. }
  30.  
  31. Heading.defaultProps = {
  32.   level: 1,
  33.   palette: 'grayscale',
  34. }
  35.  
  36. export default Heading
RAW Paste Data
Top