Reactjs Antd中的降价

我可以证实，这一问题既没有被问到，也没有在任何地方得到解决。我目前正在一个网站上工作，使用盖茨比、斯特拉皮和Antd进行设计。我正在对其中一种内容类型使用富文本编辑器，我已经在其中放置了所有标记内容。然而，当我试图在网页上显示实际内容时，样式完全被屏蔽了。我认为这是因为内容使用了正常的HTML元素，如

和

，而不是像

或

这样的antd组件

所以我做了一些研究，发现Antd的源代码中有一个标记，我想这是用来在他们的文档中设置标记样式的。在搜索了NodeModules文件夹中的源代码之后，我还没有找到相同的代码。这是否意味着Antd不支持降价的样式，或者我在这里遗漏了什么

顺便说一句，我正在使用库来显示所有的降价。我还发布了以下所有相关代码

模板.tsx

const ProductTemplate: React.FC<Props> = ({ data }: Props) => {
  const {
    ...
  } = data

  const {
    product: { strapiId: selectedKeyProp },
  } = data
  return (
    <Layout>
      <AntLayout>
        <ProductSidebar
          selectedKeyProp={selectedKeyProp}
          productsInfo={productsInfo}
        >
          <ProductInfo product={product} />
        </ProductSidebar>
      </AntLayout>
    </Layout>
  )
}

export const query = graphql`
  ...
`

export default ProductTemplate

const ComponentName = ({ data }) => {
  const {
    ...
  } = data

  console.log(data)
  return (
    <Layout>
      <AntLayout>
        <ProductSidebar productsInfo={productsInfo}>
          <div style={{ display: "unset", padding: "15px 35px" }}>
            <ReactMarkdown className="markdown" children={content} />
          </div>
        </ProductSidebar>
      </AntLayout>
    </Layout>
  )
}

export const query = graphql`
  ...
`

export default ComponentName

constproducttemplate:React.FC=（{data}:Props）=>{
常数{
...
}=数据
常数{
产品：{strapiId:selectedKeyProp}，
}=数据
返回(
)
}
export const query=graphql`
...
`
导出默认产品模板

页面组件.tsx

const ProductTemplate: React.FC<Props> = ({ data }: Props) => {
  const {
    ...
  } = data

  const {
    product: { strapiId: selectedKeyProp },
  } = data
  return (
    <Layout>
      <AntLayout>
        <ProductSidebar
          selectedKeyProp={selectedKeyProp}
          productsInfo={productsInfo}
        >
          <ProductInfo product={product} />
        </ProductSidebar>
      </AntLayout>
    </Layout>
  )
}

export const query = graphql`
  ...
`

export default ProductTemplate

const ComponentName = ({ data }) => {
  const {
    ...
  } = data

  console.log(data)
  return (
    <Layout>
      <AntLayout>
        <ProductSidebar productsInfo={productsInfo}>
          <div style={{ display: "unset", padding: "15px 35px" }}>
            <ReactMarkdown className="markdown" children={content} />
          </div>
        </ProductSidebar>
      </AntLayout>
    </Layout>
  )
}

export const query = graphql`
  ...
`

export default ComponentName

const ComponentName=（{data}）=>{
常数{
...
}=数据
console.log（数据）
返回(
)
}
export const query=graphql`
...
`
导出默认组件名

---

我想这里可以指出这个问题。

接收

子项
道具中的降价内容。但是一旦内容显示到页面上，我上面提到的样式就被取消了。
我在github上提出了这个问题。根据开发人员的说法，目前没有对antd的降价支持。正如我所想，上面链接的markdown.less文件只是用于他们文档中的标记。
绕过此解决方案的一种方法是完全按照antd组件元素的指定包含标记。例如，我们可以使用
来代替头的
#
或
，尽管这肯定是痛苦的并且容易出错。
另一个解决方案是使用，它支持标记内的jsx。
大约晚了一个月，但我遇到了这样一个问题：我需要一种方法来更改react-markdown-react组件生成的html样式。我在NextJS应用程序中使用react markdown，并使用Antd作为我的组件库。此外，我还使用react-syntax highlighter和react-syntax highlighter prismjs来处理照明代码块

虽然Antd中不支持标记，但react markdown中支持自定义组件！react markdown允许您覆盖渲染引擎，并使用自己的组件替换单个组件，因此我使用Antd组件替换了一组组件：

公平的警告：这是我第一次通过，以确保它的工作，例如，它不会处理列表项输入内的复选框

从“react syntax highlighter”导入{Prism as SyntaxHighlighter}；
从“react syntax highlighter/dist/cjs/styles/prism/prism”导入{coy}；
从“备注gfm”中导入gfm；
从“antd”导入{排版}；
const{Title，Text}=排版；
从“antd”导入{List}；
常量mymarkdowndata=
#标题
一些文本
##第二个标题
*名单！
*有
*许多
*物品！
'
常量渲染器={
标题：功能标题（道具）{
返回{props.children}；
},
列表：功能制作列表（道具）{
返回{props.children}
},  
listItem：函数MakeListItem（道具）{
返回{props.children}
},
inlineCode：函数makeInlineCode（props）{
返回{props.children}
},
代码：函数makeCodeBlock（道具）{
返回{props.value}
},
blockquote：函数makeBlockQuote（道具）{
返回{props.children}
}
};

然后在组件渲染函数中：

render（）{
返回
}