Question: How to apply styling to react-rendered output

[lukewis]

Hello! Thank you so much for this library! I love the focus that it has on extensibility! One thing that I've been struggling with is how to apply styling to the output from SimpleMarkdown.defaultReactOutput. I spent some time googling as well as exploring this repo looking for examples, but have come up empty so far. Any tips to point me in the right direction?

A bit of relevant info.......I'm attempting to use this in a React Native application that uses Expo.

The below renders correctly....but my particular app has a dark background that cascades down the DOM.

import React from "react";
import * as SimpleMarkdown from "simple-markdown";
import { StyleSheet } from "react-native";

export const MarkdownLuke = () => {
  const txt = `
# Summary

This is a sample markdown page with a link to [google](https://google.com)
`;
  const tree = SimpleMarkdown.defaultBlockParse(txt);
  const output = SimpleMarkdown.defaultReactOutput(tree);
  console.log(output);
  return (
    <div>
      <div>{output}</div>
    </div>
  );
};

To fix this, I'd like to change the background-color, but if I add a style to it, then the entire react tree seems to disappear (a bit hard to explain, actually)

// This does NOT work

export const MarkdownLuke = () => {
  const txt = `
# Summary

This is a sample markdown page with a link to [google](https://google.com)
`;
  const tree = SimpleMarkdown.defaultBlockParse(txt);
  const output = SimpleMarkdown.defaultReactOutput(tree);
  console.log(output);
  return (
    <div style={styles.block}>
      <div>{output}</div>
    </div>
  );
};

const styles = StyleSheet.create({
  block: {
    backgroundColor: "white",
  },
});

[adelbeke]

@lukewis have you found a way to use it with RN ?

[lukewis]

@adscud unfortunately i have not

[adelbeke]

@lukewis I use markdown-it, it seems to be better.