小编Jul*_*b42的帖子

如何在 MDX 文件的组件中包含 Markdown 内容?

我正在开发一个使用 React 组件的 MDX 页面项目。当我在组件内添加文本时,我希望生成 HTML(就像组件外部的内容一样)。但生成的页面在组件内只有文本,没有 HTML。

这是我的代码:

组件js:

<Container>
    {props.children}
</Container>
Run Code Online (Sandbox Code Playgroud)

MDX 页面:

<Component>
     **Generated HTML**
</Component>
Run Code Online (Sandbox Code Playgroud)

生成的页面:

<div>
     **Generated HTML**
</div>
Run Code Online (Sandbox Code Playgroud)

预期行为:

<div>
     <p><strong>Generated HTML</strong></p>
</div>
Run Code Online (Sandbox Code Playgroud)

我怎样才能解决这个问题?

谢谢!

reactjs next.js mdxjs

9
推荐指数
1
解决办法
1858
查看次数

如何在 Nextjs 中切换类并更改 CSS?

我正在开发一个 Next.js 项目,其中菜单通过<p>切换菜单类打开。我设法做到了这一点,但是当我在 CSS 中添加该类时,它没有考虑这两个类。

这是我的代码:

成分

import { useState } from "react";
import styles from "../styles/modules/header.module.scss";

export default function Component() {
    const [isModal, setIsModal] = useState(false);
    return (
        <div>
            <p onClick={() => setIsModal(!isModal)}>Menu</p>

            <div className={`${isModal && "nav-open"} ${styles.ModalContainer}`}>
                Content
            </div>
        </div>
    );
}
Run Code Online (Sandbox Code Playgroud)

社会保障体系

.ModalContainer {
    position: absolute;
    left: -100vw;

    &.nav-open {
        left: 0;
    }
}
Run Code Online (Sandbox Code Playgroud)

当我检查代码时,我可以看到当我单击菜单按钮时它添加了类,但看不到预期的更改。有人有解决办法吗?

sass reactjs css-modules next.js

3
推荐指数
1
解决办法
7544
查看次数

标签 统计

next.js ×2

reactjs ×2

css-modules ×1

mdxjs ×1

sass ×1