8000 Inline styling via props · Issue #3 · firebase/firebaseui-web-react · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Inline styling via props #3

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
Closed
kmjennison opened this issue Nov 10, 2017 · 5 comments
Closed

Inline styling via props #3

kmjennison opened this issue Nov 10, 2017 · 5 comments
Assignees
@nicolasgarnier
Labels
type: feature request

Comments

@kmjennison
Copy link

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

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

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

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...

@nicolasgarnier nicolasgarnier self-assigned this Nov 11, 2017
@kmjennison
Copy link
Author

@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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nicolasgarnier nicolasgarnier

Labels
type: feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jhuleatt @nicolasgarnier @kmjennison
0