样式化组件语义工具包(表单.输入) [英] Styled Component Semantic kit ( Form . Input )

问题描述

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

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

尝试过但无济于事

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>

代码:https://codesandbox.io/s/fast-morning-hq5zq

推荐答案

请参考这个示例链接:代码沙盒

我已经更新了 CSS 属性并使用 styled-component 对表单控件的悬停产生了影响.目前，我只是根据您分享的图片设置颜色代码，您可以将其更改为您想要的颜色代码.

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

这篇关于样式化组件语义工具包(表单.输入)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！