样式-系统按钮不正确呈现

Question

我试图创建一个按钮组件使用样式-系统。不久以前，一切都很好，但是现在只有一部分的风格呈现得很好，我不知道为什么。

这是我的装置..。

以下是组件文件：

// 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

以下是主题文件：

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

以下是按钮主题文件：

// 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',
  },
}

问题似乎在于buttonDefaults对象。该对象中的一些(但不是全部)项正在呈现--即：

• 颜色
• 背景颜色
• 填充
• 字号

但是这些样式并没有呈现出来：

• 边框
• 高度
• 线高
• 盒影
• 边界半径

我也搞不懂为什么。有什么想法吗？

如果有什么不同的话，这是密码箱上的盖茨比。以下是网址：https://codesandbox.io/s/learningstyledsystemandrebass-8j6im?fontsize=14

Answer 1

两个问题：

1. 如果不确保它们各自的设置器是初始Button设置的一部分，默认值就无法工作。

例如，向Button添加borders &其余部分修复它：

import { color, space, fontSize, buttonStyle, borders,  boxShadow} from 'styled-system'
const Button = styled('button')(
  {
    cursor: 'pointer',
    display: 'inline-block',
    letterSpacing: '.5px',
    outline: 0,
    textTransform: 'uppercase',
    textAlign: 'center',
    textDecoration: 'none',
    verticalAlign: 'middle',
  },
  color,
  space,
  borders, // Doubt the order matters, but they need to be here.
  boxShadow,
  fontSize,
  buttonSize,
  buttonStyle
)

1. “框影”的默认值包含一个bug：

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)`,
// remove the `box-shadow` declaration. Probably left over from a copy/paste
// Should be the following instead
boxShadow: `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)`,
}

这是一个工作叉关于密码箱