如何移除React注册表单div容器的多余灰色边框？

你看到的灰色边框来自<fieldset>元素的默认浏览器样式，和html/body的样式设置无关——浏览器会给fieldset默认添加灰色边框、内边距和外边距。

快速修复方案 #

在你的全局CSS文件中添加以下样式，直接重置fieldset的默认样式：

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

如果需要给表单内容添加内边距，不要加在fieldset上，建议加到外层的.Registration容器或<form>标签里，比如：

.Registration form {
  padding: 2rem; /* 可根据需求调整内边距大小 */
}

额外优化提示 #

• 你代码里的<div class="Registration">需要改成<div className="Registration">，React中必须使用className替代class属性，避免渲染异常。
• 全局的:focus { outline: 0; }会破坏页面可访问性，建议替换为自定义聚焦样式，比如：

:focus {
  outline: 2px solid darkblue;
  outline-offset: 2px;
}

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