Блог

Главная - Вопросы по программированию - Как предотвратить переопределение моего правила css с помощью normalise css в reactjs / jsx?

Как предотвратить переопределение моего правила css с помощью normalise css в reactjs / jsx?

#css #reactjs

#css #reactjs

Вопрос:

У меня есть очень простой компонент react

 class UpgradeContainer extends Component {
  render() {
    return (
      <div className={styles.msg}>
            <div className={styles['msg-container']}>
              <h3 className={`${styles.title} highlight-color`}>
                Big Header
              </h3>
              <div className={`${styles.description} alternate-color`}>
                  Small text
                  <br />
                  Some more small text
              </div>
            </div>
      </div>
    );
  }

Вот соответствующий css

 .title {
  font-size: 40px;
  line-height: 50px;
  color: white;
}
.description {
  text-align: center;
  font-size: 16px;
  padding: 20px 0 10px;
  color: white;
}

И вот вывод DOM из вышеуказанного компонента

введите описание изображения здесь

Оно воспроизводится здесь в виде текста:

     <div class="mRMOZryRtlFUx_NHlt1WD" data-reactid=".0.1.0.0.0.1">
        <h3 class="_2s6iXRZlq-nQwIsDADWnwU highlight-color" data-reactid=".0.1.0.0.0.1.0">
Big Header</h3>
         <div class="_1pFak-xR0a8YH6UtvoeloF alternate-color" data-reactid=".0.1.0.0.0.1.1">
          <span data-reactid=".0.1.0.0.0.1.1.0">Small text</span>
           <br data-reactid=".0.1.0.0.0.1.1.1">
          <span data-reactid=".0.1.0.0.0.1.1.2">Some more small text</span></div></div>

Как вы можете видеть, reactjs добавил пару <span/> для переноса небольшого текста

Я ожидаю, что текст заголовка ( Big Header ) будет намного больше текста описания ( small text и some more small text ).

Однако результат выглядит примерно так:

введите описание изображения здесь

Это потому, что reactjs по какой-то причине добавляет интервал для обтекания текста small text и some more small text (data-reactid «.0.1.0.0.0.1.1.0» и «.0.1.0.0.0.1.1.2» соответственно)

Когда я проверил стиль, я обнаружил, что стили этих span элементов переопределяются следующими правилами css

введите описание изображения здесь

Я действительно озадачен этим, потому что я сам не определял эти правила.

Итак, я нажимаю на <style>...</style> , и это приводит меня к введите описание изображения здесь

Я хочу знать, как я могу эффективно переопределить эти правила css?

Конечный результат, который я хочу, это:

введите описание изображения здесь

Комментарии:

1. Вы уверены, что эти стили действительно взяты из normalize.css? Глядя на ссылку github на вашем изображении , на самом деле не отображается ни один из этих стилей. Возможно ли, что стили вводятся после стилей normalize.css? Также, на мой взгляд, было бы намного чище, если бы вы не использовали <br/> для создания пробела — вместо этого просто используйте два divs, чтобы окружить как первый, так и второй текст блока отображения, и они будут разделены на отдельные строки.

Ответ №1:

  1. Если вы используете ‘Normalize.css’!Решением этой проблемы является сохранение вашего основного файла css ‘style.css’ внизу. По крайней мере, ниже normalize.css.

  2. В случае, если вы используете Bootstrap, прямо с официального сайта Bootstrap : «Для улучшения кроссбраузерного рендеринга мы используем Normalize.css, проект Николаса Галлахера и Джонатана Нила». Решение этой проблемы — сохранить ваш основной файл css ‘style.css’ внизу. По крайней мере, ниже bootstrap.css.