样式系统按钮未正确呈现

Posted 2023-03-15

【中文标题】样式系统按钮未正确呈现

【英文标题】：Styled-System Button Not Rendering Properly

【发布时间】：2019-10-09 05:01:53

【问题描述】：

我正在尝试使用 Styled-System 创建一个按钮组件。不久前一切正常，但现在只有部分样式可以正确渲染，我不知道为什么。

这是我的设置...

这是组件文件：

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

【参考方案1】：

两个问题：

如果不确保它们各自的设置器是初始 Button 设置的一部分，默认设置将不起作用。

例如，将borders 和其余部分添加到 Button 可以修复它：

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
)

box-shadow 的默认值包含一个错误：

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)`,

这是一个工作叉on codesandbox

【讨论】：

做到了——谢谢。关于订单的评论——我不认为订单对于内置设置器很重要，但似乎自定义设置器（在这种情况下 buttonStyle 需要使用所有内置的 Styled-System 设置器. 再次感谢 - 非常感谢。