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.

Fix specificity problem of margin for Spacings -> Text components

See original GitHub issue

Issue Description

The 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.


Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

emmenkocommented, Feb 18, 2019

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.

jonnybelcommented, Feb 18, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found