Reactjs 样式化组件语义工具包（Form.Input）

您好，我想知道如何使用表单的样式化组件更改css。语义输入

在胡佛我需要这样的东西：

但我不能更改输入的背景色，也不能更改默认情况下的边框颜色

and hover:
export const FormCustom = styled(Form)`
&&& {
    background: #000;
}
`
export const FormInput = styled(Form.Input)`
&&& {
    color: red;
    background: transparent;
}
`

我试过了，但没用

export const FormInput = styled(Form.Input)`
&&& {
    color: red;
    background: transparent;
}
`

我的表格：

<FormCustom size='large'>
        <Segment basic>
          <FormInput fluid icon='user' iconPosition='left' placeholder='E-mail address' />
          <FormInput
            fluid
            icon='lock'
            iconPosition='left'
            placeholder='Password'
            type='password'
          />

          <Button color='teal' fluid size='large'>
            Login
          </Button>
        </Segment>
      </FormCustom>

登录

---

代码：

您可以使用

&:hover

来定义悬停

   export const FormInput = styled(Form.Input)`
      border: 1px solid transparent;
      &:hover {
        border:1px solid #ff0000;
        border-radius:5px;
      }
    `;

---

请参考此示例链接：

我已经更新了CSS属性，并使用样式化组件对表单控件的悬停产生了影响。目前，我只是根据您共享的图像设置颜色代码，以便您可以将其更改为所需的颜色代码

现在，在悬停输入控件和图标颜色上，它们都会根据您的要求进行更改

您需要更新样式化组件，如下所示

export const FormInput = styled(Form.Input)`
  border: 2px solid red;
  border-radius: 0.28571429rem;
  background: transparent;
  -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  input {
     border: none !important;
  }
  &:hover {
    border: 2px solid #7159c1;
    background: #333;
    i {
      color: #7159c1;
    }
  }
  &:focus {
    color: #000;
    border-color: #000;
    border-radius: 0.28571429rem;
    background: transparent;
    -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
    box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  }
`;

---

我没有成功这就像创建一个新的边框我在css中使用它来修改：.ui.form input/.ui.form input:focus/.ui.form input:hover但我不能做styledI更改并将css文件与修改的标记放在一起，但是使用styled它看起来像是创建了一个新的边框。出于某种原因，在hoover上有两个edges@MykonSpt实际上这是一个边界对于输入，库会自动创建div>div>input，所以您看到的边框是实际的输入框顺序，所以我只是在样式化组件中做了一些更改，从而解决了问题。请验证链接，代码已更新。