Fix specificity problem of margin for Spacings -> Text components
See original GitHub issueThe margin: 0
set on the typography components is really annoying when using them with e.g. <Spacings.{Inline,Stack}>
components, because the margin from the spacing components doesn’t get applied (lower specificity).
To work around that, you would wrap the <Text>
components in a <div>
.
Should we maybe simply force the spacing components to apply their margin by using !important
?
It feels like a little hack but maybe it’s more of a trade-off.
Thoughts?
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
[TextContainer] Missing top margin on Polaris components ...
Issue summary When upgrading to Polaris 3, inside a no longer adds top margin. Expected behavior (and other Polaris components) inside a ...
Read more >Specificity - CSS: Cascading Style Sheets - MDN Web Docs
Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, ......
Read more >How to tackle CSS specificity issues and when to use the ...
In this post, we will be refactoring CSS code from a project of mine that has CSS specificity issues that are in need...
Read more >Spacing in CSS - Ahmad Shadeed
A better solution is to cancel the unneeded spacing by adding a negative margin to the parent element. Here is what happens.
Read more >Fix Padding/Margin CSS Specificity Error in Client-First
Are your padding and margin combo classes not behaving as expected in Client First? I see this happen when I add Client-First AFTER...
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
The purpose of a design system is for the components implementation to be as strict as possible in regards to the design rules, which means allowing components to be styled freely will defeat the purpose of a design system.
I heavily support the idea of having our uikit components support a
className
prop, because it would allow us not only to overcome some certain specificity problems such as this one, but also generally improve the flexibility of all components, making their usage closer to using the native HTML elements.It’s a simple solution and we would avoid all the generally regarded as bad practices of using
!important
, altering markup and the current excess of div wrappers.