Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom style for bars #26

Open
frntendev opened this issue Jun 18, 2021 · 2 comments · May be fixed by #59
Open

Custom style for bars #26

frntendev opened this issue Jun 18, 2021 · 2 comments · May be fixed by #59

Comments

@frntendev
Copy link

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
Copy link
Owner

lannex commented Jul 10, 2021

Thank you. I'll consider it!

@mrkvon
Copy link

mrkvon commented Nov 10, 2022 •
edited
Loading

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

utix added a commit to utix/react-password-strength-bar that referenced this issue Apr 20, 2024
@utix
feat: add control on bar height
63d7fcf 
Refs: lannex#34
Closes: lannex#26
@utix utix linked a pull request Apr 20, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add control on bar height utix/react-password-strength-bar
3 participants
@frntendev @lannex @mrkvon