daily pastebin goal
60%
SHARE
TWEET

Untitled

a guest Oct 13th, 2017 72 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top