如何移除react-syntax-highlighter组件渲染的边框/线条？

方法一：通过CSS直接覆盖样式 #

react-syntax-highlighter的边框/行分隔线通常来自默认组件样式或主题样式，直接用CSS覆盖是最直接的方式：

/* 全局样式移除组件边框和行号分隔线 */
.react-syntax-highlighter {
  border: none !important;
}
.react-syntax-highlighter .line-number-style {
  border-right: none !important;
}

如果不想污染全局样式，可以给SyntaxHighlighter添加自定义类名，再针对性设置：

// 组件中添加className
<SyntaxHighlighter
  className="custom-syntax"
  // 其他props...
/>

.custom-syntax {
  border: none;
}
.custom-syntax .line-number-style {
  border-right: 0;
}

方法二：修改主题配置 #

你使用的dracula和vs主题可能自带边框样式，可以手动修改主题对象的对应属性：

import { dracula, vs } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// 自定义dark主题，移除边框
const customDracula = {
  ...dracula,
  'pre[class*="language-"]': {
    ...dracula['pre[class*="language-"]'],
    border: 'none'
  },
  '.line-number-style': {
    ...dracula['.line-number-style'],
    borderRight: 'none'
  }
};

// 自定义light主题，移除边框
const customVs = {
  ...vs,
  'pre[class*="language-"]': {
    ...vs['pre[class*="language-"]'],
    border: 'none'
  },
  '.line-number-style': {
    ...vs['.line-number-style'],
    borderRight: 'none'
  }
};

// 组件中使用自定义主题
<SyntaxHighlighter
  style={currentTheme === "dark" ? customDracula : customVs}
  // 其他props...
/>

方法三：通过lineProps移除行号分隔线 #

如果只是行号旁边的线条，可直接通过lineProps设置行样式：

<SyntaxHighlighter
  showLineNumbers
  lineProps={{ style: { borderRight: 'none' } }}
  // 其他props...
/>

内容的提问来源于stack exchange，提问作者Yan Cerqueira