Styling
Customize the appearance of React mDL components.
CSS Variables
Components use CSS custom properties (variables) for easy theming. Override these in your CSS to match your brand:
globals.csscss
Loading...
Dark Mode
Override variables for dark mode:
dark-mode.csscss
Loading...
className Props
Add custom classes to components for additional styling:
StyledVerifier.tsxtsx
Loading...
custom-styles.csscss
Loading...
Component Part Classes
Each component exposes specific part classes for targeted styling:
MDLVerifier Parts
| Class | Element |
|---|---|
.mdl-verifier | Root container |
.mdl-verifier__header | Header section |
.mdl-verifier__qr | QR code container |
.mdl-verifier__status | Status message |
.mdl-verifier__actions | Action buttons container |
.mdl-verifier__button | Action button |
.mdl-verifier__result | Result container |
MDLQRCode Parts
| Class | Element |
|---|---|
.mdl-qrcode | Root container |
.mdl-qrcode__image | QR code image |
.mdl-qrcode__loading | Loading state |
MDLStatus Parts
| Class | Element |
|---|---|
.mdl-status | Root container |
.mdl-status__icon | Status icon |
.mdl-status__message | Status text |
.mdl-status__spinner | Loading spinner |
.mdl-status--waiting | Waiting state modifier |
.mdl-status--success | Success state modifier |
.mdl-status--error | Error state modifier |
Tailwind CSS
Use Tailwind classes with the className props:
TailwindVerifier.tsxtsx
Loading...
Styled Components
Use styled-components or emotion for CSS-in-JS styling:
StyledComponents.tsxtsx
Loading...
Custom Components
For complete control, use hooks and build your own components:
FullyCustomVerifier.tsxtsx
Loading...