Put each MDX file content inside a containter
- npm install recma-mdx-is-mdx-component
- https://github.com/mdx-js/mdx/issues/368#issuecomment-2548318709
I want to put each MDX file content inside a Bootstrap <Container>
.
Since, I'm using Next.js, I need to modify the _app.jsx
file to conditionally wrap the MDX content in a <Container>
.
//_app.jsx
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
export default function MyApp({ Component, pageProps, router }) {
return (
{
Component.name == 'MDXContent'
?
<Container className={`p-5 rounded-3 border border-3`}>
<Component {...pageProps} />
</Container>
:
<Component {...pageProps} />
}
);
}