React+TypeScript密码生成器强度指示器样式异常求助

我正在完成Frontend Mentor的密码生成器挑战项目，包含范围滑块、4个复选框和密码强度指示器。当前遇到强度指示器的样式问题：

目标效果 #

• 极弱强度：仅第一个条形为红色，其余3个为空
• 弱强度：前两个条形为橙色，其余2个为空
• 中等强度：前三个条形为黄色，其余1个为空
• 强强度：4个条形全部填充对应颜色

当前问题 #

已实现容器及条形尺寸，但强度对应的颜色填充了条形容器而非单个条形。调试时容器显示对应强度颜色，单个条形却为透明，不符合仅单个条形按需着色、容器及未填充条形透明的要求。尝试移除.too-weak等类的背景色后，仅显示条形边框；移除states中的color属性也未解决问题。

问题根源 #

1. 给.bars容器添加了.too-weak/.weak等强度类，导致容器背景色覆盖内部条形样式
2. 直接用颜色字符串作为类名（如red），但未在CSS中定义对应样式，透明状态也未生效

修复方案 #

1. 调整React组件逻辑 #

移除容器的强度类，给需要着色的条形添加对应强度类：

import zxcvbn from "zxcvbn-typescript"

type PasswordStrengthMeterProps = {
  password: string
}

const PasswordStrengthMeter = ({ password }: PasswordStrengthMeterProps) => {
  const passwordScore = zxcvbn(password).score
  const states = [
    { id: "too-weak", label: "too weak!", colorClass: "bar-too-weak" },
    { id: "weak", label: "weak!", colorClass: "bar-weak" },
    { id: "medium", label: "medium!", colorClass: "bar-medium" },
    { id: "strong", label: "strong!", colorClass: "bar-strong" },
  ]

  const { label, colorClass } = states[passwordScore] || states[states.length - 1]

  return (
    <div className='password-strength-meter'>
      <span className='label'>{label}</span>
      <div className="bars">
        {[...Array(4)].map((_, index) => (
          <div
            key={index}
            className={`bar ${index < passwordScore + 1 ? colorClass : "bar-empty"}`}></div>
        ))}
      </div>
    </div>
  )
}

export default PasswordStrengthMeter

注：zxcvbn的score范围是0-3，因此用index < passwordScore + 1来对应0→1个条形、1→2个条形的显示逻辑

2. 调整CSS样式 #

移除容器的背景色类，给条形定义填充/空状态的样式：

.password-strength-meter {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-grow: 1;
  padding-bottom: 1rem;
  background-color: var(--clr-secondary-400);
  padding-inline: 1rem;
  margin-block: 1rem;
}

.label {
  font-size: 1rem;
  line-height: 1.32rem;
  color: var(--clr-neutral-100);
  font-weight: 700;
  text-transform: uppercase;
}

.bars {
  display: flex;
  justify-content: space-between;
  border: solid 2px white;
  width: 69.7px;
  height: 32px;
  background-color: var(--clr-secondary-400);
  padding: 2px; /* 给内部条形留出间距 */
}

.bar {
  height: 28px;
  width: 10px;
}

/* 填充状态的条形样式 */
.bar-too-weak {
  background-color: red;
  border: solid 2px red;
}
.bar-weak {
  background-color: orange;
  border: solid 2px orange;
}
.bar-medium {
  background-color: yellow;
  border: solid 2px yellow;
}
.bar-strong {
  background-color: green;
  border: solid 2px green;
}

/* 空状态的条形样式 */
.bar-empty {
  background-color: transparent;
  border: solid 2px white;
}

3. 关键修改说明 #

• 移除.bars容器上的强度类，避免容器背景色覆盖内部条形
• 给每个强度对应的条形定义专属类，统一背景色和边框色
• 空状态条形设置透明背景+白色边框，匹配需求
• 调整判断逻辑以适配zxcvbn的score范围（0-3）

内容的提问来源于stack exchange，提问作者Sarah McClelland