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

abhay · Accepted Answer · 2021-03-12T07:05:39.850

2

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>

edited Mar 12 '21 at 07:05

answered Mar 12 '21 at 06:44

abhay

642
5
13

I tried this option but then `docco` style won't work – Synchro Mar 12 '21 at 06:48
Okay so docco is provided by react-syntax-highlighter – abhay Mar 12 '21 at 06:49
In docs they mention lineNumberContainerStyle - the line numbers container default to appearing to the left with 10px of right padding. You can use this to override those styles. – abhay Mar 12 '21 at 06:54
`docco` is a color theme provided by the react-syntax-highlighter package instead of it could be for example `atomOneLight` here is a list of all [themes](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/HEAD/AVAILABLE_STYLES_HLJS.MD) also you can follow the link [https://www.npmjs.com/package/react-syntax-highlighter](react-syntax-highlighter) and learn more about color themes – Synchro Mar 12 '21 at 06:55
@Synchro I update my answer please take a look. – abhay Mar 12 '21 at 07:06

score 1 · Answer 2 · answered Mar 12 '21 at 06:55

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;}

The problem is that all the styles of this component are written inside `style={{}}` by default without using a class or id — Synchro, Mar 12 '21 at 06:59

score 1 · Answer 3 · answered Mar 12 '21 at 07:13

So based on what you already said to @Zaf

The only way you could possibly override it is by either

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.
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;
}

React how to apply style inside jsx

3 Answers3