Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
More UI style and slots customization
See original GitHub issueIs your feature request related to a problem? Please describe. Today it is hard to customize the Amplify UI component deeply. While there is the alternative of not using UI components at all, it is a lot of work to reproduce all the screen, manage the auth state and the auth API myself to change a button border radius (this is an example).
Describe the solution you’d like What I like to have is:
- CSS variable at the component level Like this for amplify-authenticator I like to have variable to customize style at the component level (like amplify-sign-in). Maybe having a grid/flex system would be nice: some customer wants to have login button full width or on the right or on the left, it will be nice to have some flexibility here.
- systematically more slots It would be nice to have slots before and after each section (at least each component) empty and ready to inject customer code. On some component you already have some like
header-subtitle-slotbut this is not everywhere and not on all components.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:5 (1 by maintainers)
Top Results From Across the Web
How to customize - Material UI - MUI
First, use your browser's dev tools to identify the class for the component slot you want to override. The styles injected into the...
Read more >Slots & Props in Storefront UI - YouTube
Storefront UI is customization -first and elegant UI library based on Vue.js dedicated but not limited to eCommerce.
Read more >Customizing the UI Elements - Cronofy Docs
Theming and styling the UI Elements. ... Colors are the most commonly customized part of the UI Elements. ... PREFIX__slot-background--unavailable, .
Read more >Designing for section backgrounds using semantic slots
Semantic slots target customizations of specific page elements in order ... defined by a Office UI Fabric palette color from a site's theme....
Read more >Web UI Customization Tutorial | Nuxeo Documentation
For more information about what property are available in this slot, please check the DOCUMENT_ACTIONS documentation . From within a bundle, ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@sammartinez If this feature has been released, could you provide us a sample about how to use it? I also try to find a way to apply custom style on auth components (according to my theme site) without needed to re-create my own auth components. thanks in advance for your help.
This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.
Looking for a help forum? We recommend joining the Amplify Community Discord server
*-helpchannels or Discussions for those types of questions.