reset.css 설정으로 react-markdown을 통한 마크다운 적용이 안될 때

왜 react-markdown 적용이 안되는 걸까

사내에서 신규 프로젝트 진행 중, reset.css로 인해

HTML 요소의 기본 스타일이 제거되어 react-markdown을 통한 마크다운이

일반 텍스트처럼 보이는 문제가 있었습니다.

---

문제 해결

markdown 컴포넌트의 상위 요소에 개별 스타일을 설정해 주는 것으로 해결 가능합니다.

1. markdown 상위 요소를 생성한다.

    const Markdown = () => {
	 ...
     return (
	 ...
      <section className={cx('markdown-container')}>
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          children={markdown}
          components={{
            code(props) {
              const { children, className, node, ref, ...rest } = props;
              const match = /language-(\w+)/.exec(className || '');
              return match ? (
                <SyntaxHighlighter
                  {...rest}
                  PreTag="div"
                  children={String(children).replace(/\n$/, '')}
                  language={match[1]}
                  style={dark}
                  showLineNumbers
                />
              ) : (
                <code {...rest} className={className}>
                  {children}
                </code>
              );
            },
          }}
        />
      </section>
	)};

 

2. 마크다운에 대한 스타일링을 진행한다.

/* 마크다운 관련 css 설정 */
.markdown-container {
  width: 903px;
  padding: 24px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border: 1px solid #4b5563;
  border-radius: 8px;
}

.markdown-container h1,
.markdown-container h2,
.markdown-container h3,
.markdown-container h4,
.markdown-container h5,
.markdown-container h6,
.markdown-container p,
.markdown-container blockquote,
.markdown-container ul,
.markdown-container ol,
.markdown-container li,
.markdown-container table,
.markdown-container th,
.markdown-container td {
  all: unset; /* reset.css의 영향을 받지 않도록 초기화 */
  display: block; /* 기본 display 속성 설정 */
}

.markdown-container h1 {
  font-size: var(--font-size-2xl);
  /* margin: 1em 0; */
}

.markdown-container h2 {
  font-size: var(--font-size-xl);
  /* margin: 0.75em 0; */
}

.markdown-container h3 {
  font-size: var(--font-size-lg);
  /* margin: 0.5em 0; */
}

.markdown-container h4 {
  font-size: var(--font-size-md);
  /* margin: 0.5em 0; */
}

.markdown-container h5 {
  font-size: var(--font-size-sm);
  /* margin: 0.5em 0; */
}

.markdown-container h6 {
  font-size: var(--font-size-xs);
  /* margin: 0.5em 0; */
}

.markdown-container p {
  /* margin: 0.5em 0; */
  line-height: var(--line-height-md);
}

.markdown-container blockquote {
  padding: 1em;
  /* margin: 1em 0; */
  border-left: 4px solid #ccc;
  background: #f9f9f9;
}

.markdown-container ul,
.markdown-container ol {
  /* margin: 0.5em 0; */
  padding-left: 2em;
}

.markdown-container li {
  margin: 0.25em 0;
}

.markdown-container table {
  width: 100%;
  border-collapse: collapse;
  /* margin: 1em 0; */
}

.markdown-container th,
.markdown-container td {
  padding: 0.5em;
  border: 1px solid #ccc;
}

.markdown-container pre {
  background: #f4f4f4;
  padding: 1em;
  border-radius: 5px;
  overflow: auto; /* 코드 블록이 길 경우 스크롤 가능 */
}

.markdown-container code {
  background: #eaeaea;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace; /* 코드 글꼴 설정 */
}

 

마크다운 위로 부모 요소를 추가해 부모 요소의 하위에는

reset.css가 적용되지 않도록 all: unset 속성을 설정해

마크다운 요소가 제대로 보이도록 처리 가능합니다.