title: Styled-System Button Not Rendering Properly
body: <p>I am trying to create a button component using Styled-System.  Everything was working fine not long ago, but now only part of the styles are rendering properly and I can't figure out why.  </p>
  
  <p>Here is my setup...</p>
  
  <p>Here is the component file:</p>
  
  <pre><code>// Button.js
  import styled from 'styled-components'
  import { color, space, fontSize, buttonStyle } from 'styled-system'
  
  import { buttonDefaults, buttonSize } from '../styles/theme'
  
  const Button = styled('button')(
    {
      cursor: 'pointer',
      display: 'inline-block',
      letterSpacing: '.5px',
      outline: 0,
      textTransform: 'uppercase',
      textAlign: 'center',
      textDecoration: 'none',
      verticalAlign: 'middle',
    },
    color,
    space,
    fontSize,
    buttonSize,
    buttonStyle
  )
  
  Button.defaultProps = {
    ...buttonDefaults,
  }
  
  export default Button
  </code></pre>
  
  <p>Here is the theme file:</p>
  
  <pre><code>import breakpoints from './themes/breakpoints'
  import colors from './themes/colors'
  import fontSizes from './themes/fontSizes'
  import spacing from './themes/spacing'
  
  import { buttonStyles as buttons, buttonSizes } from './themes/buttons'
  
  const theme = {
    colors,
    spacing,
    fontSizes,
    breakpoints,
    buttons,
    buttonSizes,
  }
  
  export { buttonDefaults } from './themes/buttons'
  export { buttonSize } from './themes/buttons'
  
  export default theme
  </code></pre>
  
  <p>Here is the button theme file:  </p>
  
  <pre><code>// buttons.js
  import { variant } from 'styled-system'
  
  export const buttonDefaults = {
    backgroundColor: `dark`,
    border: 'none',
    borderRadius: `2px`,
    color: `light`,
    fontSize: `body`,
    height: `36px`,
    lineHeight: `36px`,
    padding: `0 16px`,
    boxShadow: `box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
                            0 3px 1px -2px rgba(0, 0, 0, 0.12), 
                            0 1px 5px 0 rgba(0, 0, 0, 0.2)`,
  }
  
  export const buttonStyles = {
    flat: {
      color: '#343434',
      boxShadow: 'none',
      backgroundColor: 'transparent',
      transition: 'background-color .2s',
    },
    block: {
      display: 'block',
    },
  }
  
  export const buttonSize = variant({
    prop: 'size',
    key: 'buttonSizes',
  })
  
  export const buttonSizes = {
    small: {
      height: '32.4px',
      lineHeight: '32.4px',
      fontSize: '13px',
    },
    large: {
      height: '54px',
      lineHeight: '54px',
      fontSize: '15px',
      padding: '0 28px',
    },
  }
  </code></pre>
  
  <p>The problem seems to be with the <code>buttonDefaults</code> object.  Some (but not all) of the items in that object are getting rendered -- namely:</p>
  
  <ul>
  <li>color</li>
  <li>background-color</li>
  <li>padding</li>
  <li>font-size</li>
  </ul>
  
  <p>But these styles are not getting rendered:</p>
  
  <ul>
  <li>border</li>
  <li>height</li>
  <li>line-height</li>
  <li>box-shadow</li>
  <li>border-radius</li>
  </ul>
  
  <p>And I can't figure out why.  Any ideas?</p>
  
  <p>P.S.  In case it makes a difference -- this is a Gatsby on codesandbox.  Here is the URL:  <a href="https://codesandbox.io/s/learningstyledsystemandrebass-8j6im?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/learningstyledsystemandrebass-8j6im?fontsize=14</a></p>