React how to apply style inside jsx

Question

I am using react-syntax-highlighter and I am having one problem I am trying to write some styles inside jsx namely paddingLeft: 0. But the problem is that the syntax theme is specified inside style, it looks like this

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

Please pay attention to the code style={docco}, inside style i want to apply paddingLeft but don't quite understand how

Answer 1

In react-syntax-highlighter they provide a property name customStyle it will be combined with the top-level style on the pre-tag, styles here will overwrite earlier styles.

customStyle={{paddingLeft:100}} 

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

Answer 2

I suggest starting your application on a browser and using an inspect element tool on the component you are trying to change. Once you find the element look for its class name or id. it can possibly be a very long class name. but once you find it target that class name on a separate css file or if you dont want to make a css file you can set it as an ID on the component. If the class name is really long and spaced out. for example class = "container wrapper spacer element" you will target it like this: .container.wrapper.spacer.element {padding-left: 0;}

Answer 3

So based on what you already said to @Zaf

The only way you could possibly override it is by either

1. Increase the specificity of your styling. There's an order to the way CSS styles are written. So for example, ID's have a higher precedence over classes so the styles get override by the styles applied to the ID.
2. Use the !important tag (Highly inadvisable but use as an absolute last. resort)

Now. Since the styles you're talking about are applied as inline styles, the only possible way you could override them is by using the !important override to your styles.

So you'd have to include it in your CSS sort of like this.

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