Don't provide custom CSS

[danawoodman]

Overriding custom CSS is currently a pain because of provided styles. I think the ideal would be that if a users passes in CSS for the input, that is used instead of provided styles. Right now there is no way to get the default CSS working without a lot of hard-coded when using a Bootstrap input. Is there a plan or way to tell the component not to use any built-in CSS?

Some suggestions:

• Don't set font family
• Don't set border styles
• Don't set font sizes
• Don't set text colors

As I see it, the only styles that should be provided are the bar minimum to get the status bar to work. Besides that, it should be up to passing className and/or style to each of the sub-components (like input, desc, etc).

[mmw]

Yeah I can understand the frustration if you dont want to use the default styles. Will look into providing a fix for this issue.

[danawoodman]

That would be great! If I could pass in some props that would override the CSS classes that could be an option?

[mmw]

I was thinking easiest thing to do is pass a flag if you want the default CSS or not. If you have time/interest feel free to submit a PR otherwise I'll implement when I have time (buried in work atm)

[danawoodman]

I’ll see if I have some time to in the next days. Say a flag that is unstyled which is set to false by default?

[danawoodman]

On another hand, being able to apply a class to the input field would mean one could use their existing .input class.

[luke-dare]

As a quick fix, I'd suggest requiring that CSS is added manually as a separate import; that way it's easy to include / exclude styling as you wish.

[mmw]

@luke-dare Im not a fan of that solution. Its a breaking change for something that shouldnt really need a breaking change and adds a second step to everyone who is using the tool as-is. Requiring CSS separately isnt something I've seen as a common practise.

Sorry I havent had time to look into this.. will see if I can find some time soon

[DennisKeulen]

Same issue, stupid thing is in my dev build my own css works, but in production the build-in css overrules my css (given its the last css file in line).

How about passing the id/class that is now set as static ('ReactPasswordStrength')?
So make it set that class by default, if you want to not use it or use your own you can set it via props?

<ReactPasswordStrength customStyle="true">

if customStyle is not present, just set the className as 'ReactPasswordStrength'.
if that prop is present, dont add 'ReactPasswordStrength' so your build-in css will not be used and people have to write their own css for the id that you can already set in the input props.

[mmw]

Took another look at the issues presented here, my feedback/response:

Right now there is no way to get the default CSS working without a lot of hard-coded when using a Bootstrap input

Integration with bootstrap (or any other css framework from a stylistic perspective) isnt a high priority for this. The goal is to have a super easy input component that rates password strength. I dont think the priority of bootstrap/foundation/etc integration will change in the future unfortunately.

RPS is an extremely simple component, the value it provides is the default styling that makes it easy to drop into a project. If you need more I would highly suggest implementing a custom component yourself in your project. Read the source code and you'll see how simple it is bc dropbox has done all the hard work with zxcvbn.

How about passing the id/class that is now set as static ('ReactPasswordStrength')?
So make it set that class by default, if you want to not use it or use your own you can set it via props?

This is the solution I've implemented to solve this through the namespaceClassName prop. If you change that it will update all the internal class names to use it (ex: ReactPasswordStrength-strength-desc becomes <namespaceClassName>-strength-desc) and you can provide your own styles w/o conflicts.

If you are bothered by the orphaned CSS just import the universal JS module instead (see docs). I havent tested this recently but it should work just fine. I've also updated the examples with a custom CSS example, if you need to change much more than this I think you're better off implementing zxcvbn in your project instead of using this tool.

Hope that helps!