您好,我想知道如何使用表单的样式化组件更改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;
}
`;
请参阅此示例链接:codesandbox
我已经更新了CSS属性,并使用样式化组件对表单控件的悬停产生了影响。目前,我只是根据您的图像共享设置颜色代码,因此您可以将其更改为所需的颜色代码。
现在,悬停输入控件和图标颜色已根据您的要求进行了更改。
您需要按照以下方式更新样式化的组件
export const FormInput = styled(Form.Input)`
border-color: 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;
&: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;
}
`;