样式组件文档没有提到这种情况,我无法弄清楚语法。
我将如何转动这个样式组件:
const StyledButton = styled.button`
color: red;
${props => props.disabled && css`
color: grey;
background-color: grey;
`}
`
转化为对象符号:
const StyledButton = styled.button(props => ({
color: 'red',
------
}))
我知道以下内容可以解决这个问题,但对于我的用例,我需要保留第一个示例中的逻辑。所以这不适合我:
const StyledButton = styled.button(props => ({
color: props.disabled ? 'grey' : 'red',
backgroundColor: props.disabled ? 'grey' : transparent,
}))
也许这就是你所追求的(或类似的)
const StyledButton = styled.button((props) => {
const disabledStyles = {
color: 'grey',
'background-color': 'grey',
};
return {
color: 'red',
...(props.disabled && disabledStyles)
};
})
我绝对不明白为什么你不能使用上面的三元方法,但我对项目也有一些奇怪的要求。祝你好运
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句