Styled Component Semantic kit ( Form . Input )

问题

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

回答1:

Please refer to this example link: codesandbox

I have updated the CSS properties and made an effect on the hover of form-control using styled-component. Currently, I just set the color code based on image share by you, so you can change it to your desired color code.

Now on hover input control and icon color, both are changed as per your requirements.

You need to update the styled component as below

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;
  }
`;

回答2:

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

来源：https://stackoverflow.com/questions/59595518/styled-component-semantic-kit-form-input

标签

reactjs

semantic-ui

styled-components