我正在尝试使用样式化系统创建按钮组件。不久前一切正常,但是现在只有一部分样式可以正确渲染,我不知道为什么。
这是我的设置...
这是组件文件:
// 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
对象上。该对象中的某些(但不是全部)项目正在渲染-即:
但是这些样式无法呈现:
我不知道为什么。有什么想法吗?
P.S。如果情况有所不同-这是codeandbox上的Gatsby。这是URL:https://codesandbox.io/s/learningstyledsystemandrebass-8j6im?fontsize=14
答案 0 :(得分: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
)
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