React+Material-UI设置borderWidth为2px不显示 Chrome渲染为0px是什么原因？

问题原因 #

CSS 规则中，border 是 border-width、border-style、border-color 三个属性的简写，其中border-style 默认值为 none，只要不主动修改该属性，无论定义的边框宽度和颜色值是什么，浏览器都会判定边框不存在，表现为渲染时边框宽度重置为0。

解决方案 #

你可以任选以下一种方式修改你的search样式定义：

• 补充borderStyle属性：

search: {
  // 原有其他样式
  borderWidth: '2px',
  borderColor: theme.palette.primary.main,
  borderStyle: 'solid', // 可根据需要改为dashed、dotted等值
}

• 使用border简写属性一次性定义三个参数，代码更简洁：

search: {
  // 原有其他样式
  border: `2px solid ${theme.palette.primary.main}`,
}

如果只需要给单侧加边框，就用对应单侧的属性即可，比如borderBottom: 2px solid ${theme.palette.primary.main}。

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