如何debug列表标号丢失问题？

[lwang-79]

大家好，我在React + Chakra UI中使用Cherry Markdown遇到列表标号丢失问题。已经定位到是和Chakra UI冲突，请问如何进一步debug？相关代码在哪里？谢谢！

Replication steps:

npm create vite
cd <project-folder>
npm install
npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add
npm install cherry-markdown --save

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { Provider } from "./components/ui/provider"

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider><App /></Provider>
    {/* <App /> */}.                           // 更改此处就正常
  </StrictMode>,
)

app.tsx

import { useEffect, useState, useRef } from 'react';
import './App.css';
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';

function App() {
  const editorRef = useRef<HTMLDivElement | null>(null);
  const [editor, setEditor] = useState<Cherry | null>(null);
  const isInitialized = useRef(false);

  useEffect(() => {
    if (editorRef.current === null || isInitialized.current) return;
    try {
      // 初始化编辑器
      const config = {
        el: editorRef.current,
        value: '1. item1\n2. item2\n3. item3',
        callback: {
          afterChange: () => console.log('change'),
        },
      };

      const cherry = new Cherry(config);
      setEditor(cherry);
      isInitialized.current = true;
    } catch (error) {
      console.error('初始化 Cherry 编辑器失败', error);
    }
    return () => {
      if (editor) {
        editor.destroy();
      }
    };
  }, [editor]);

  return (
    <>
      <main>
        <div className='main-wrapper'>
          {/* 该div作为编辑器的最外层容器 */}
          <div ref={editorRef} id="markdown-container" />
        </div>
      </main>
    </>
  );
}

export default App;

[sunsonliu]

这种冲突一般就是ol和ul的list-style属性被覆盖了导致的，可以尝试再覆盖回去（比如用!important）

[lwang-79]

多谢大佬🙏，解决了！