question-mark
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.

Support for margins and paddings in theme.style definitions

See original GitHub issue

Typically I like to have default margins/paddings in some elements such as header (h1, h2, etc.). The theme.style definitions seems to be a good place for them so that following would work.

const theme = {
  ...
  styles: {
    h1: {
      my: 3,
      ...
    },
    ...
};

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
jxnblkcommented, Jan 17, 2020

Based on the code example above, the Heading component will not pick up values from theme.styles.h1 – that’s reserved for markdown content and Styled.h1. To add default variants for the Heading component, you’ll need to add theme.text.heading styles

0reactions
jxnblkcommented, Jan 21, 2020

You can specify styles and HTML semantics separately with the Heading component: e.g. <Heading as='h3' variant='title' />

Read more comments on GitHub >

github_iconTop Results From Across the Web

padding - CSS: Cascading Style Sheets - MDN Web Docs
The padding CSS shorthand property sets the padding area on all four sides of ... In contrast, margin creates extra space around an...
Read more >
How to Set CSS Margins and Padding (And Cool Layout Tricks)
Setting Margins and Paddings​​ You can control the padding applied to the four sides of an element using the padding-top , padding-right ,...
Read more >
CSS Margin vs. Padding: What's the Difference? - HubSpot Blog
In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's...
Read more >
Theme.json layout and spacing options - Full Site Editing
With spacing presets both developers and users can select from predefined values for padding, margin and block spacing (block gap). The purpose ...
Read more >
Adding Margin and Padding to Blocks
Adding padding and margin ... The spacing around blocks can be controlled through the styles section of theme.json . If you are familiar...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found