How do I add style to a markdown table?

[hjohnsick]

When I try to add style to my markdown table, I end up deleting the table completely.

 const renderers =
{
  
    heading: (value: any) => {
        return <SprkHeading className="header">{ value.children }</SprkHeading>
        
    },
  
   list: (value: any) => {
    return <SprkList element="ul" >{ value.children }</SprkList>
  
    },
    paragraph: (value: any) => {
        return <SprkText variant="bodyTwo">{ value.children }</SprkText>
      
    },
   
    table: (value: any) => {
        return <SprkTable additionalTableClasses="sprk-b-Table--striped-even">{ value.children }</SprkTable>
    },
   
}

The heading, list, and paragraph are rendering but the table doesn't show up.

[ChristianMurphy]

@hjohnsick how are you using remark to render the table?
remark + remark+rehype + rehype-react? react-markdown? Something else?

A codesandbox with an example of the issue would help folks offer suggestions as well.
remark and rehype (for markdown to html): https://codesandbox.io/s/remark-rehype-debug-4cz8v
react-markdown: https://codesandbox.io/s/react-markdown-debug-9n4eg
are some good starting points depending on your setup.

[hjohnsick]

react-markdown

[ChristianMurphy]

https://codesandbox.io/s/react-markdown-debug-forked-p4qjn?file=/src/App.js is an example with inline styles; classes, styled components, or any styling system of your choice could also work.

[ChristianMurphy]

A runnable example of the issue you're seeing would be helpful for tracking down if a specific version for react-markdown, a plugin, or SprkTable isn't playing nice here.

[hjohnsick]

Thank you @ChristianMurphy! Your example of inline styles was exactly what I needed.