Reactjs 输入类型密码的样式化组件

如何在样式化组件中为输入type='password'指定样式

// export const Input = styled.input`
//   width: 100%;
//   height: 50px;
//   border-radius: 4px;
//   background-color: rgba(104, 105, 102, 0.1);
//   border: 1px solid #354545;
//   margin-top: 20px;
//   outline: none;
//   padding-left: 40px;
//   color: white;
//   font-size: 22px;
// `;

---

这应该行得通。与普通css不同，样式化组件将属性作为

props

。您需要使用道具来有条件地设置元素的样式

export const Input = styled.input`
    ${props =>   props.type === 'password' && `
        width: 100%;
        height: 50px;
        border-radius: 4px;
        background-color: rgba(104, 105, 102, 0.1);
        border: 1px solid #354545;
        margin-top: 20px;
        outline: none;
        padding-left: 40px;
        color: white;
        font-size: 22px;
    `}
`;

从样式化组件：

export const PasswordInput=styled.input.attrs（props=>({
//每个密码都应为type=“password”
键入：“密码”
}))`
宽度：100%；
高度：50px；
边界半径：4px；
背景色：rgba（104、105、102、0.1）；
边框：1px实心354545；
边缘顶部：20px；
大纲：无；
左侧填充：40px；
颜色：白色；
字体大小：22px；`；

这两个示例都有点过分，仅用于样式设计，使用

&[type=“password”]

从“样式化组件”导入样式化；
export const Input=styled.Input`
&[type=“password”]{
边框：1px纯黑；
背景：红色；
}
`;
导出默认函数App（）{
返回(
用户名
密码
);
}

抱歉，请输入class='password'

export const PasswordInput = styled.input.attrs(props => ({
  // Every <PasswordInput /> should be type="password"
  type: "password"
}))`
    width: 100%;
    height: 50px;
    border-radius: 4px;
    background-color: rgba(104, 105, 102, 0.1);
    border: 1px solid #354545;
    margin-top: 20px;
    outline: none;
    padding-left: 40px;
    color: white;
    font-size: 22px;`;