为何向styled-components样式对象传递center属性值无效？

你的问题出在重复声明了align-items属性，CSS的规则是后写的样式会覆盖前面的，所以不管你通过centerAlign传什么值，最终生效的都是后面硬写的align-items: center。

把Container的样式代码改成下面这样就能正常工作了：

import styled from "styled-components";
export const Container = styled.div `
    display: flex;
    flex-direction: column;
    justify-content: ${({centerJustify}) => centerJustify ? 'center': 'flex-start'};
    align-items: ${({centerAlign}) => centerAlign || 'flex-start'}; 
`

补充说明： #

• 这里用centerAlign || 'flex-start'的意思是：如果传入了centerAlign属性，就用它的值；没传的话默认用flex-start，你也可以把默认值改成你需要的其他值（比如stretch）。
• 也可以参考justify-content的写法用三元判断，效果一致：

  align-items: ${({centerAlign}) => centerAlign === 'center' ? 'center' : 'flex-start'};
  

• 使用组件时确保传递的centerAlign值是合法的CSS align-items取值，比如'center'、'flex-end'等。

内容的提问来源于stack exchange，提问作者Andreea