React TypeScript应用中Chrome按钮默认边框为0.909px且无法修改的原因

核心原因 #

1. CRA自带全局样式重置的影响
   Create React App（CRA）的TypeScript模板默认引入了modern-normalize样式重置库，它会统一调整按钮这类原生元素的默认样式，比如修改边框计算逻辑、继承全局字体/行高属性。这会导致按钮实际渲染尺寸出现小数，触发Chrome的亚像素渲染机制，边框被自动调整为接近1px的小数（比如你看到的0.909px）。而普通HTML页面没有这类全局重置，浏览器使用原生默认样式，按钮尺寸为整数，边框正常显示1px。

2. 字体大小继承引发的尺寸小数
   CRA默认给body设置了font-size: 1rem（通常对应16px），如果项目中其他组件或样式修改了字体大小，按钮继承后会导致自身宽高计算出现小数，进一步触发Chrome的亚像素渲染，让边框宽度显示为非整数。

3. Chrome的亚像素渲染机制
   Chrome为保证元素渲染的视觉连贯性，会对非整数像素的元素进行亚像素级渲染。当按钮整体尺寸为小数时，边框宽度会被自动调整为适配该尺寸的数值，而非严格的1px。

解决方法 #

• 显式固定按钮的字体大小和基础尺寸：给按钮添加样式font-size: 16px; border: 1px solid #000 !important;，确保按钮基础尺寸为整数，避免亚像素渲染干扰。
• 覆盖CRA的默认重置样式：在全局CSS文件中添加针对按钮的样式重置，示例代码：

button {
  border-width: 1px !important;
  font-size: 16px;
  box-sizing: border-box;
}

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