Javascript 从存储在React数据库中的字符串呈现HTML

我目前正在React中开发一个页面，并试图从使用use样式格式化的RTDB中提取HTML内容

样式的示例

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
        topcontent:{
          fontSize:10,
        },
        blackBox:{

            paddingBottom:20,

        }
    ...

数据库中数据的示例

<p className={classes.topcontent}> Content Here <p>
<img src='/img/image.png' width='50%' />

这里的内容

渲染的对象

return (
<Grid sm={9} xs={12}>
    <div dangerouslySetInnerHTML={{__html:article.content}} />
</Grid>
);

返回(
);

存储在数据库中的字符串如下所示，并传递给article.content

intro-copy
标题在这里
此处的内容

我遇到的问题是，当它渲染时，makeStyles没有被渲染。谁能给我指出正确的方向吗

---

如果我硬编码HTML，它会工作，但当它从数据库中提取时，就像页面呈现后加载内容一样，所有的“makeStyles”都丢失了。我可以只使用样式表，它会工作，但这是最好的方法吗

我解决了这个问题，加载页面后内容会呈现，因此我需要将内容更改为HTML，而不是材质UI标记示例：

内容是这样的

<p className={classes.topcontent}>intro copy </p>
<img src='/article/img.png' width='95%' />
<Typography variant='h2' className={classes.titleTwo}>Title Here</Typography>             
<p>Content Here</p>

我必须将一些样式从中移动到css表中

---

我觉得一定有更好的办法，但这会暂时奏效。如果你知道更好的方法，请告诉我

我解决了这个问题，加载页面后内容会呈现，因此我需要将内容更改为HTML，而不是材质UI标记示例：

内容是这样的

<p className={classes.topcontent}>intro copy </p>
<img src='/article/img.png' width='95%' />
<Typography variant='h2' className={classes.titleTwo}>Title Here</Typography>             
<p>Content Here</p>

我必须将一些样式从中移动到css表中

---

我觉得一定有更好的办法，但这会暂时奏效。如果你知道更好的方法，请告诉我

我们可以看看makeStyles函数的代码吗？它会返回一个承诺吗？我只是从'@materialui/core/styles'使用import{makeStyles}；如果我硬编码HTML，它会工作，但当它从数据库中提取时，就像页面呈现后加载内容一样，所有的“makeStyles”都丢失了。我可以使用一个样式表，它可以工作，但这是最好的方法吗？我们可以看看makeStyles函数的代码吗？它会返回一个承诺吗？我只是从'@materialui/core/styles'使用import{makeStyles}；如果我硬编码HTML，它会工作，但当它从数据库中提取时，就像页面呈现后加载内容一样，所有的“makeStyles”都丢失了。我可以只使用样式表，它会工作，但这是最好的方法吗？

<p class='topcontent'>intro copy  </p>              
<img src='/article/img.png' width='95%' />          
<h2 class='titleTwo'>Title Here</h2>
<p>Content Here</p>  

.topcontent{
    font-size: 20px;

}

.titleTwo{
    font-size: 24px;
    font-family: "Helvetica Neue";
    font-weight: 400;

  }