reactjs - 输入类型密码的样式组件
问题描述
如何在 styled-components 中为 input 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;
// `;
解决方案
这两个例子都只是为了造型目的有点矫枉过正,可以通过使用轻松避免&[type="password"]
import styled from "styled-components";
export const Input = styled.input`
&[type="password"] {
border: 1px solid black;
background: red;
}
`;
export default function App() {
return (
<div>
<div>
<label htmlFor="username">Username</label>
<Input id="username" type="text" />
</div>
<div>
<label htmlFor="password">Password</label>
<Input type="password" />
</div>
</div>
);
}
或者,如果您想扩展基本输入组件
import styled from "styled-components";
export const Input = styled.input`
border: 1px solid black;
`;
export const PasswordInput = styled(Input)`
&[type="password"] {
background: red;
}
`;
export default function App() {
return (
<div>
<div>
<label htmlFor="username">Username</label>
<Input id="username" type="text" />
</div>
<div>
<label htmlFor="password">Password</label>
<PasswordInput type="password" />
</div>
</div>
);
}
推荐阅读
- awk - 在行开始和结束之间查找: awk 使用 bash 变量并每次都添加新段落
- jquery - 当后代交互元素获得焦点时,jQuery keydown() 不会触发
- regex - Sed \w 字符类不适用于 mac 上的替换
- python - 了解 Pandas 中的 str.replace() 行为
- javascript - 所需的 PHP 文件有时动画不同
- c# - 对 String.Concat() 的单次调用花费 11.23 毫秒(根据统一分析器)
- react-native - npm install 不工作它显示 npm 包正在寻找资金 - 反应原生
- ios - 为什么调用 super 是这个方法的最后一件事而不是第一件事?
- git - Gitlab:无法连接到本地主机端口 3128:连接被拒绝
- image - Ubuntu 18.04 上的 Nvidia Jetson Nano 完成 docker run 并出现“exec 格式错误”