Реагируйте, как применить стиль внутри jsx

Question

Я использую react-syntax-highlighter, и у меня есть одна проблема. Я пытаюсь написать некоторые стили внутри jsx, а именно paddingLeft: 0. Но проблема в том, что тема синтаксиса указана внутри стиля, выглядит это так

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

Пожалуйста, обратите внимание на код style={docco}, внутренний стиль, который я хочу применить paddingLeftно не совсем понимаю как

Answer 1

В react-syntax-highlighter они предоставляют имя свойства customStyleон будет объединен со стилем верхнего уровня в предварительном теге, стили здесь перезапишут более ранние стили.

      customStyle={{paddingLeft:100}} 

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

Answer 2

Итак, основываясь на том, что вы уже сказали @Zaf

Единственный способ, которым вы могли бы переопределить его, - это либо

1. Увеличьте специфичность вашего стиля. Существует порядок написания стилей CSS. Так, например, идентификаторы имеют более высокий приоритет по сравнению с классами, поэтому стили переопределяются стилями, примененными к идентификатору.
2. Используйте тег !important (крайне нецелесообразно, но используйте его в крайнем случае)

В настоящее время. Поскольку стили, о которых вы говорите, применяются как встроенные стили, единственный возможный способ переопределить их — использовать переопределить ваши стили.

Так что вам придется включить его в свой CSS примерно так.

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

Answer 3

Я предлагаю запустить ваше приложение в браузере и использовать инструмент проверки элемента для компонента, который вы пытаетесь изменить. Как только вы найдете элемент, найдите его имя класса или идентификатор. это может быть очень длинное имя класса. но как только вы обнаружите, что оно предназначено для этого имени класса в отдельном файле css, или если вы не хотите создавать файл css, вы можете установить его как идентификатор компонента. Если имя класса действительно длинное и растянутое. например, class = "элемент-оболочка контейнера spacer element", вы нацелите его следующим образом: .container.wrapper.spacer.element {padding-left: 0;}