Styling
use-cardano comes with a set of fully styled components, which we try to keep as un-opinionated as possible to allow for wide usage out-of-the-box.
With that said, use-cardano allows you to easily overwrite the default styles of its components. This is done simply with a small set of classes in vanilla CSS, using BEM naming conventions. This allows for a straightforward implementation of your own styles, without having to worry about the internal structure of the components or fighting selector rule specificity.
BEM naming conventions
These are the classes used by use-cardano, more information and context coming. We are planning on doing a more visual breakdown so you easily can see what element each class is applied to.
- .cardano-wallet-selector
- .cardano-wallet-selector__button
- .cardano-wallet-selector__button--active
- .cardano-wallet-selector__button--loading
- .cardano-wallet-selector__button--warning
- .cardano-wallet-selector__button__content
- .cardano-wallet-selector__button__content--incorrect-network
- .cardano-wallet-selector__button__loading-spinner
- .cardano-wallet-selector__button__loading-spinner:after
- .cardano-wallet-selector__menu
- .cardano-wallet-selector__menu__item
- .cardano-wallet-selector__menu__item button
- .cardano-wallet-selector__menu__item button:disabled
- .cardano-wallet-selector__menu__item button:not(:disabled):hover
- .cardano-wallet-selector__menu__item--current button
- .cardano-wallet-selector__menu__item--current__checkmark
- .cardano-wallet-selector__menu__item__text
- .cardano-wallet-selector__menu__item__text__icon
- .cardano-wallet-selector__menu__item:last-child
- .cardano-wallet-selector__menu__item:last-child button
- .cardano-wallet-selector__menu__item .cardano-wallet-selector__menu__item__disconnect
- .cardano-toaster
- .cardano-toaster--open
- .cardano-toaster--top
- .cardano-toaster--bottom
- .cardano-toaster--right
- .cardano-toaster--left
- .cardano-toaster__content
- .cardano-toaster__close-button
- .cardano-toaster__warning-list
If you don't whish to use the default styles at all, you can do so by simply not importing the use-cardano/styles/use-cardano.css file in your application. This will remove the default styles, but leave the class names according to the BEM naming convention for you to style to your liking.