Inline styling via props

[kmjennison]

It would be helpful if this also exposed props to style the UI components rather than requiring a global CSS stylesheet.

[nicolasgarnier]

I can add passing the className props to the underlying div (which is the main container). However, inside that container, the UI is generated by firebaseui-web, which we are simply wrapping, and there will be no way to pass styles through props to these UI elements (since none of that is using React under the hood unfortunately). Unless you know some techniques that would allow us to do that we'll have to rely on global CSS stylesheets.

[kmjennison]

A somewhat hacky option would be to modify the underlying class styles with React-created style components, using template literals for the CSS (e.g., see react-style-tag). It would let users of this library to not have to worry about breaking style changes in the underlying firebaseui-web implementation. This likely wouldn't be too hard to implement.

A better solution would be to first formally support customization in firebaseui-web and build on top of it here.

[nicolasgarnier]

FYI I've just added passing the className to the underlying div main container in v1.06 it doesn't help a lot but it was a low hanging fruit :)

Thanks for pointers, It would indeed be nice to have a better way to style components, let me investigate a bit to see what could be best. I have to do some testing as I'm not even sure we can hack something easily as many elements get created on the fly. Proper customization support in firebaseui-web would be ideal I think it's the only way we could use something nice like CSS modules or JSS.

I might be able to create an example using react-style-tag too, I think it should work with what we have in the example that's using the global CSS, but that would be kind of similar to the global CSS though, just inside <Style> tags...

[kmjennison]

@nicolasgarnier Sounds good.

With a React-created stylesheet, we could create a level of abstraction between the passed-in styles and the final stylesheet. So, a developer could just pass a signInButtonStyle prop rather than having to inspect and modify whatever classes are on that button. It would effectively act like child components, which I'd argue is an improvement from simply using a global CSS stylesheet.

I've never used react-style-tag, so I'm not sure if it's the best option—just found it after a quick Google.

[jhuleatt]

Since custom styles aren't supported by firebaseui-web (that feature request can be found at firebase/firebaseui-web#586), I'm going to close this out.

If firebaseui-web does support custom styles in the future, we'll consider adding them to firebaseui-web-react.