Semantic UI React中Form.Input去除默认边框样式无效怎么办

• Form.Input是Semantic UI封装的复合组件，渲染时会自动生成<div class="ui input"><input /></div>的嵌套结构，你手动在外层额外套的ui transparent inputdiv作用层级错误，根本匹配不到内部的输入框元素。
• 直接给Form.Input组件传的style属性，默认会绑定到组件自带的外层包裹div上，不会作用到内部真实的<input>原生节点，你写的边框、轮廓相关样式根本没加在输入框上，自然不生效。
• Semantic UI默认给内部input标签预设了边框、圆角样式，选择器优先级高于你给外层元素加的普通样式，外层样式无法覆盖。

方法1：通过组件自带属性给内部input传样式（适合单处修改） #

不用额外套外层div，直接用Form.Input提供的input配置项，把输入框专属样式直接透传给内部原生input元素，透明类直接传给组件本身的className即可：

<Form.Input 
  className="transparent"
  style={{ marginBottom: "20px", marginLeft: "0.4cm", width: "59.7cm" }}
  input={{
    style: {
      border: "none",
      borderRadius: 0,
      background: "white",
      borderBottom: "2px solid #006400",
      outline: "none"
    }
  }}
  error={errors.kookId ? { content: errors.kookId } : null}
  name="kookId"
  onChange={handleChange}
  value={kookId}
  autoFocus 
/>

方法2：自定义CSS覆盖默认样式（适合多处复用该风格） #

如果项目里多处要用到这种底边框输入框，直接写全局CSS覆盖Semantic UI的默认规则，维护性更高：

/* 覆盖透明输入框默认样式 */
.ui.transparent.input input {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #006400 !important;
  background: #ffffff;
  outline: none !important;
}

/* 可选：自定义聚焦态样式，替换默认的蓝色轮廓 */
.ui.transparent.input input:focus {
  border-bottom-color: #004d00 !important;
  background: #ffffff;
}

写好CSS后，组件只需要传className="transparent"就能生效，不用重复写大段内联样式。

注意：不需要再手动给Form.Input外层套带ui input类的div，组件本身已经渲染了对应结构，多余的嵌套会导致样式匹配失效。

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