Chakra UI Prose
Prose is a Chakra UI component that adds a ready-made typography styles when rendering remote HTML.
Installation
yarn add @nikolovlazar/chakra-ui-prose
# or
npm i @nikolovlazar/chakra-ui-prose
Usage
To use the Prose component in your app, first you need to use the withProse theme extension:
import { withProse } from '@nikolovlazar/chakra-ui-prose';
const theme = extendTheme({}, withProse());
export default theme;
I know you've already did it, but I want to remind you to pass your theme in your ChakraProvider.
Then, to render the remote HTML content, you need to import the Prose component and wrap your content with it:
import { Prose } from '@nikolovlazar/chakra-ui-prose';
const MyPage = (content) => {
return <Prose>{content}</Prose>;
};
export default MyPage;
Overriding Style
The withProse theme extension has an optional argument that overrides its default style. To change the style of a certain element, supply a component style object in the theme extension, provide the baseStyle property and override the element, like so:
const theme = extendTheme(
{},
withProse({
baseStyle: {
h2: {
fontWeight: 'light',
},
},
})
);
Refer to the default theme when overriding certain elements.
I've also created a CodeSandbox which you can use to try out the Prose component, and override its default style.
Making it official
The Prose package is not part of the official Chakra UI package for a reason. We decided to roll it out as a separate package is to avoid bloating the core library while we figure out how much people actually need it.
If you want this package to be part of the core library, let us know in this discussion thread: chakra-ui/chakra-ui-docs#469.
9 Nov 19, 2022
5 Sep 27, 2022
2 Jun 21, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
3 Dec 29, 2022
331 Jan 4, 2023
3 Oct 23, 2022
53 Dec 30, 2022
362 Dec 30, 2022
252 Dec 20, 2022
6 Dec 14, 2022
5 Jun 24, 2022
83.6k Dec 30, 2022
16 Dec 26, 2022
53 Dec 31, 2022
32 Jan 2, 2023
3 Sep 17, 2022