Global Theming of Reactstrap

leovigna commented 2 years ago

Description

While CSS-in-JS frameworks like styled-components or emotion provide a nice way to programmatically design components, this does not necessarily encourage best practices for theming as we end up manually overriding the CSS of our individual components.

On the other hand using a framework like reactstrap, while quite handy for layout, comes with an unsatifactory default theme that we would like to customize. Of course, the suggested way to customize the reactstrap is with a custom theme as highlighted here. However, these are often implemented as an SCSS stylesheet that overrides the CSS variables.

Questions

How to change the global CSS variables (eg. primary-color, font-color...) with CSS-in JS?
Should we consider shifting to using a different framework from reactstrap to enable better global CSS overrides?

Links

React-bootstrap framework docs (not reactstrap!) suggest using a theme provider to override classnames. https://react-bootstrap.github.io/getting-started/theming/

leovigna commented 2 years ago

https://chakra-ui.com/

netanelben commented 2 years ago

End up using Chakra UI and its Theme System. works great !!!

owlprotocol / web3-redux