[Components] Use `styles[as]` for Heading
See original GitHub issueIs your feature request related to a problem? Please describe.
While using the Heading
component, I came across the issue that my h1
-h3
styles were ignored:
// theme.js
export default {
fontSizes: {
sm: '0.8rem', // 1.25 ** -1
base: '1rem', // 1.25 ** 0
lg: '1.5rem', // 1.25 ** +2
xl: '2rem', // 1.25 ** +3
'2xl': '3rem', // 1.25 ** +5
},
styles: {
h1: { fontSize: '2xl' },
h2: { fontSize: 'xl' },
h3: { fontSize: 'lg' },
},
};
I would like to alter the styles of headings without adding them to the root styles (body h1
, body h2
and body h3
).
Describe the solution you’d like
The Heading
component should inherit the style determined by its as
prop.
Describe alternatives you’ve considered
Set the default as
value of Heading
to Styled.h2
.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Creating a Generic Heading Component Using Styled System ...
We're going to use Styled System variants to define styles for each heading level. The number of levels depends on your app's complexity, ......
Read more >How to Create Headings in Word (Using Heading Styles)
Creating headings by applying Word heading styles · Click in the paragraph (title or subheading) you want to designate or format as a...
Read more >Apply styles - Microsoft Support
Select a style. Using Headings allows you to move parts of the document around by using View > Navigation Pane and then moving...
Read more >Handling headings in a UI component library | by Chris Pearce
Examples of complex UIs (Booking.com, Ebay, and YouTube) that demonstrate how hard it is to use heading styles when tied to semantics.
Read more >Basics - styled-components
Create a Title component that'll render an <h1> tag with some styles ... Use Title and Wrapper like any other React component –...
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 FreeTop 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
Top GitHub Comments
The
theme.styles
object is specifically intended for markdown/MDX content. There are many cases where a headings styles should not match the HTML element to account for a11y, SEO, and the intended visual designs. I do not think these styles should be attached to an HTML element outside of markdown, but as stated above, you can usevariant: 'styles.h1'
where needed or create a custom component to reuse behavior in your applicationSounds reasonable, thank you for the detailed explanation!