Custom style for bars

[frntendev]

While using the library I figured out It's not possible to style the bars and the only prop it has is to change the colors.
https://github.com/lannex/react-password-strength-bar/blob/master/lib/Item.tsx#L9
It would be nice to add that feature. I can raise a PR for that if it's possible.

[lannex]

Thank you. I'll consider it!

[mrkvon]

For the moment, i use the following to style the bars:

component:

<PasswordStrengthBar
  password={password}
  className="passwordStrengthBar"
/>

stylesheet:

.passwordStrengthBar > div > div {
  height: 0.5rem !important;
  // add whatever style you need
  // but the word "!important" is important to overwrite library's inline styles
}

// you may also use :nth-child pseudoselector to target specific bars
// https://css-tricks.com/almanac/selectors/n/nth-child/
// e.g. to change the space between bars:
.passwordStrengthBar > div > div:nth-child(even) {
  width: 0.5rem !important;
}

Hope this helps