Styled Component Semantic kit ( Form . Input )

Question

Hello I would like to know how I could change css with the styled component of the form. semantic input

I need something like this on hoover:

But I can't change the background color of the input and also the border color in both default

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

tried but to no avail

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

my form:

<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>

code: https://codesandbox.io/s/fast-morning-hq5zq

Answer 1

You can use &:hover to define hover.

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

temporary sample sandbox