反应如何在 jsx 中应用样式答案

【问题标题】：React how to apply style inside jsx反应如何在 jsx 中应用样式
【发布时间】：2021-06-10 04:53:45
【问题描述】：

我正在使用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但是不太明白怎么做

【问题讨论】：

标签： javascript reactjs styles react-syntax-highlighter

【解决方案1】：

在 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>

【讨论】：

我试过这个选项，但是docco 样式不起作用
好的，所以 docco 由 react-syntax-highlighter 提供
在文档中他们提到 lineNumberContainerStyle - 行号容器默认出现在左侧，右侧填充为 10px。您可以使用它来覆盖这些样式。
docco 是由 react-syntax-highlighter 包提供的颜色主题，而不是例如 atomOneLight 这里是所有 themes 的列表，您也可以点击链接 [ npmjs.com/package/… 并了解有关颜色主题的更多信息
@Synchro 我更新了我的答案，请看一下。

【解决方案2】：

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

【讨论】：

问题是这个组件的所有样式默认都写在style={{}}里面，没有使用class或者id

【解决方案3】：

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

您可以覆盖它的唯一方法是通过任一方式

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

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

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

.something{
    background-color: #202020 !important;
}

【讨论】：