如何在jsx中应用样式

Question

我正在使用反应语法-荧光笔，我遇到了一个问题，我试图在jsx中编写一些样式，即paddingLeft: 0。但问题是语法主题是在样式内部指定的，它看起来如下

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

请注意代码style={docco}，内部风格我想应用paddingLeft，但不太明白

Answer 1

在“反应语法-荧光笔”中，它们提供了一个属性名customStyle --它将与预标记上的顶级样式组合在一起，这里的样式将覆盖以前的样式。

customStyle={{paddingLeft:100}} 

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

Answer 2

我建议在浏览器上启动应用程序，并在要更改的组件上使用检查元素工具。找到元素后，查找它的类名或id。它可能是一个很长的类名。但是，一旦您发现它的目标是独立css文件上的类名，或者如果您不想创建css文件，则可以将其设置为组件上的ID。如果类名真的很长而且间隔很长的话。例如，class =“容器包装器间隔元素”，您的目标是这样的：.container.wrapper.spacer.element {填充-左: 0;}

Answer 3

所以根据你对@Zaf说的话

唯一可能覆盖它的方法是

1. 增加你的造型的特异性。CSS样式的编写方式是有顺序的。例如，ID的优先级高于类，因此样式被应用于ID的样式覆盖。
2. 使用！重要标签(非常不可取，但作为绝对的最后。(度假地)

现在。由于您所讨论的样式是作为内联样式应用的，因此可以重写它们的唯一方法是对样式使用!important覆盖。

所以你必须把它包括在CSS中，就像这样。

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