Styles de l'interface matérielle et html / markdown

Question

Notre application est construite en utilisant la bibliothèque Material-UI (avec des thèmes). Dans le cadre de cette application, nous analysons les données markdown en html ( bibliothèque marquée ).

Comment appliquer les thèmes de material-ui ( Typographie ) à un html pur ?

En quelque sorte

<div dangerouslySetInnerHTML={ {__html: marked(markdown code)}}/>

Doit avoir les styles définis par material-ui Typographie

Answer 1

Les styles de tous les Typography Les variantes sont dans le thème à theme.typography.<variant> (vous pouvez parcourir ces entrées dans le thème par défaut ici : https://material-ui.com/customization/default-theme/#default-theme ). Vous pouvez en tirer parti pour créer des styles ciblant les balises que vous souhaitez prendre en charge, comme le montre l'exemple ci-dessous :

import React from "react";
import { makeStyles } from "@material-ui/core";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme) => {
  const tags = ["h1", "h2", "h3", "h4", "h5", "h6"];
  const nestedRules = {};
  tags.forEach((tag) => {
    nestedRules[`& ${tag}`] = { ...theme.typography[tag] };
  });
  return {
    root: nestedRules
  };
});

export default function App() {
  const classes = useStyles();
  return (
    <Typography
      className={classes.root}
      variant="body1"
      dangerouslySetInnerHTML={{
        __html:
          "<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6><p>default body1</p>"
      }}
    ></Typography>
  );
}

Réponse connexe : material-ui makeStyles : comment donner un style par nom de balise ?

Answer 2

Utiliser régulièrement Typography et transmettre ce HTML de la même manière qu'il est transmis dans la question.

<Typography
    variant="h2"
    color="primary"
    dangerouslySetInnerHTML={{ __html: "<p>Hi from inner HTML</p>" }}>

</Typography>

Le problème est que lorsque dangerouslySetInnerHTML est passée, alors ne passez rien comme enfants.

Voici une démo qui fonctionne :

Note : Assurez-vous également que la fonction marked(markdown code) renvoie le HTML dans une chaîne de caractères.

Answer 3

Utilisez le markdown-to-jsx paquet npm. aquí est l'exemple des modèles de l'interface utilisateur du matériel.

Il faut essentiellement créer un objet de configuration que ReactMarkdown apprécie et qui est spécifique à l'interface matérielle.

import React from 'react';
import ReactMarkdown from 'markdown-to-jsx';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';

const styles = (theme) => ({
  listItem: {
    marginTop: theme.spacing(1),
  },
});

const options = {
  overrides: {
    h1: {
      component: Typography,
      props: {
        gutterBottom: true,
        variant: 'h5',
      },
    },
    h2: { component: Typography, props: { gutterBottom: true, variant: 'h6' } },
    h3: { component: Typography, props: { gutterBottom: true, variant: 'subtitle1' } },
    h4: {
      component: Typography,
      props: { gutterBottom: true, variant: 'caption', paragraph: true },
    },
    p: { component: Typography, props: { paragraph: true } },
    a: { component: Link },
    li: {
      component: withStyles(styles)(({ classes, ...props }) => (
        <li className={classes.listItem}>
          <Typography component="span" {...props} />
        </li>
      )),
    },
  },
};

export default function Markdown(props) {
  return <ReactMarkdown options={options} {...props} />;
}

Je l'ai appris directement de leur exemple.