1

我正在使用react-syntax-highlighter并且遇到了一个问题，我正在尝试在 jsx 中编写一些样式，即paddingLeft: 0. 但问题是 style 里面指定了语法主题，看起来像这样

<SyntaxHighlighter
    language="javascript"
    style={docco}
    wrapLines={true}
    showLineNumbers={true}
    codeTagProps={{style: {fontFamily: "inherit"}}}
>
    {codeString}
</SyntaxHighlighter>

请注意代码style={docco}，里面的样式我想申请paddingLeft但不太明白怎么做

4

3 回答 3

2

在 react-syntax-highlighter 中，它们提供了一个属性名称customStyle，它将与 pre-tag 上的顶级样式相结合，这里的样式将覆盖早期的样式。

customStyle={{paddingLeft:100}} 

  <SyntaxHighlighter
        language="javascript"
        style={docco}
        customStyle={{paddingLeft:100}} 
        wrapLines={true}
        showLineNumbers={true}
        codeTagProps={{style: {fontFamily: "inherit"}}}
    >
        {codeString}
    </SyntaxHighlighter>
于 2021-03-12T06:44:25.753 回答
1

所以根据你已经对@Zaf 说的话

你可以覆盖它的唯一方法是

  1. 增加样式的特异性。CSS 样式的编写方式是有先后顺序的。例如，ID 的优先级高于类，因此样式会被应用于 ID 的样式覆盖。
  2. 使用 !important 标签（非常不建议使用，但绝对是最后的手段）

现在。由于您正在谈论的样式被应用为内联样式，因此您可以覆盖它们的唯一可能方法是!important对您的样式使用覆盖。

所以你必须像这样将它包含在你的 CSS 中。

.something{
    background-color: #202020 !important;
}
于 2021-03-12T07:13:10.190 回答
1

我建议在浏览器上启动您的应用程序，并在您尝试更改的组件上使用检查元素工具。找到元素后，查找它的类名或 id。它可能是一个很长的类名。但是一旦你发现它在一个单独的 css 文件上定位该类名，或者如果你不想制作一个 css 文件，你可以将它设置为组件上的 ID。如果类名真的很长并且间隔开。例如 class = "container wrapper spacer element" 你会像这样定位它： .container.wrapper.spacer.element {padding-left: 0;}

于 2021-03-12T06:55:00.813 回答