I have been attempting to customize the font size for h elements within a Chakra-UI theme, but I am facing challenges in overriding the default responsive definitions set by the base theme.
In my NextJS project, where I fetch content from DatoCMS headless CMS, the implementation of the h elements is as follows:
...
renderRule(isHeading, ({ node, children, key }) => {
return (
<Heading key={key} as={`h${node.level}`} pt={6} pb={4}>
{children}
</Heading>
);
}),
...
If I try to modify it within this structure by including something like
<Heading key={key} as={`h${node.level}\`} pt={6} pb={4} size=('5xl')>Heading elements), except for adjusting the size of headings.
The closest I've come is by tweaking the size within the global object:
const styles = {
global: (props) => ({
h1: { fontSize: [null, null, '5xl'] }
})
}
While this does reflect changes in the browser, it still gets overridden. In the developer tools, the computed CSS showcases conflicting values for font sizes.
I have also experimented with:
Specifying a single value in textStyles:
const textStyles = {
h1: {
fontSize: '5xl'
}
}
Defining an array in textStyles:
const textStyles = {
h1: {
fontSize: [ null, null, '5xl' ]
}
}
Setting the baseStyle at the component level:
const Heading = defineStyleConfig({
baseStyle: {
fontWeight: 'light', // Functional
textStyles: { h1: [ null, null, '5xl' ] } // Not effective
}
})
Unfortunately, none of these modifications seem to take effect on the final output in the browser.
Could someone guide me on the correct approach to adjust text size at the theme level?