How to extend the default list?

[mayrsascha]

I have the following example markdown:

• Test A

My code:

import ReactMarkdown from 'react-markdown'
import ChakraUIRenderer from 'chakra-ui-markdown-renderer'
import { List } from "@chakra-ui/react"
...

<ReactMarkdown
  components={ChakraUIRenderer({
     ...,
     ul: ({ children }) => {
        return <List as="ul">
          {children}
        </List>
      }
  })} 
>
   {markdown}
</ReactMarkdown>

results in this rendering error:

ContextError: useListStyles returned is 'undefined'. Seems you forgot to wrap the components in "<List />" 

[Zain-ul-din]

I tried the same code but ended up with the same error you had.

Problem

I think the actual problem is inside ChakraUI you probably also need to override the theme for li element

Here how i slove this problem

import Markdown from "react-markdown";
import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
import { Flex, Text, UnorderedList } from "@chakra-ui/react";

export default function MarkDownContent (
    { children } : { children: string | null | undefined }
) 
{
    return <>
        <Flex p={4} flexDir={'column'}>
            <Markdown
                components={ChakraUIRenderer({
                    li: props=> {
                        const { children } = props
                        return <Text display={'list-item'}>{children}</Text>
                    },
                    ul: props => {
                        const { children } = props
                        return <UnorderedList my={2} mb={4} pl={2}>
                            {children}
                        </UnorderedList> 
                    }
                })}
            >
                {children}
            </Markdown>
        </Flex>
    </>
}