javascript - 样式系统按钮未正确呈现
问题描述
我正在尝试使用 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
对象上。该对象中的某些(但不是全部)项目正在被渲染——即:
- 颜色
- 背景颜色
- 填充
- 字体大小
但是这些样式没有被渲染:
- 边界
- 高度
- 线高
- 盒子阴影
- 边界半径
我不知道为什么。有任何想法吗?
PS如果它有所作为 - 这是一个关于codesandbox的盖茨比。这是网址: https ://codesandbox.io/s/learningstyledsystemandrebass-8j6im?fontsize=14
解决方案
两个问题:
- 如果不确保它们各自的设置器是初始设置的一部分,默认设置将不起作用
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)`,
}
这是代码沙箱的工作分支
推荐阅读
- c# - 错误:ToastNotification 类型在 Windows.Foundation.UniversalApiContract 和 Windows.UI 中都存在
- c# - 在 Unity 中使用 AdMob 实现插页式广告
- python - 爆炸列
- linux - 使用 sed 查找匹配两个日期的一系列行
- c++ - Postgres自定义类型映射到C结构?
- flutter - 有没有办法在 Flutter 上找到连接速度?
- laravel - 我无法显示来自我的控制器的一些信息,我必须在 @section('content') @endsection 之间显示的信息
- php - MySQL PDO 多个 UPDATE
- java - 与 log4j2 集成后,日志未反映在报告门户中
- mysql - 需要进行哪些更改来防止警告:#1287 在我的查询中不推荐在表达式中设置用户变量?