除了斜体和粗体之外,Markdown无法正常工作。我已经发现问题是由Tailwind CSS引起的,因为它处理文本大小和其他样式的方式不同。如果我在index.jsx
中注释掉index.css
导入(它定义了Tailwind的指令),所有Markdown类型,如标题、代码等都可以正常工作。
News.jsx
import ReactMarkdown from 'react-markdown';
import { useState } from 'react';
function News() {
const [markdown, setMarkdown] = useState('# I am heading');
return (
<div>
<textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
<ReactMarkdown>{markdown}</ReactMarkdown>
</div>
);
}
export default News;
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css'
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);