我正在做一个项目,我必须创建一个复选框,它的标签与复选框垂直居中对齐,选择时的颜色是黑色,这两种情况都没有发生。
import React from "react";
import './checkbox.less';
interface props {
label: string;
}
const Checkbox:React.FC<props> = ({label }) => (
<div className="flex">
<div>
<input
type="checkbox"
id={label}
className = "container"
/>
<label htmlFor={label}>{label}</label>
</div>
</div>
)
export default Checkbox;
CSS档案:
.App {
font-family: sans-serif;
text-align: center;
}
.container {
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
color: black;
vertical-align:middle;
}
.flex{
display: flex;
align-items: center;
justify-content: flex-start;
vertical-align:middle;
}
我试着通过添加属性来更改它们,但效果不太好。请帮助
1条答案
按热度按时间f0brbegy1#
不能重新创建问题,但从它的外观,
.flex
不工作,因为它有一个div内,所以它不能对齐复选框+标签〉删除它,并非常肯定它会工作。至于颜色,我不认为你的代码实际上做任何事情,因为它不是正确的方式。
accent-color
是一个新功能,所以它可能不会在所有的浏览器工作,但值得一试,因为它的速度。第一个
顺便说一句,因为我不理解typescript或react语法的方式,但是
className
真的需要在它们之间留一个空格吗?