В моем решении React я использую специальный компонент под названием RichText < / а>. Проблема с этим компонентом в том, что один из стилей для элемента h2 имеет разные font-weight, как мне нужно. Я пытаюсь переопределить стиль по умолчанию для этого пользовательского компонента, но из-за того, что это свойство установлено как !important, я не могу этого сделать (поскольку порядок стиля пользовательского компонента имеет приоритет над моим импортом). См. Изображение ниже:

enter image description here

Я пробовал следующие вещи, чтобы убедиться, что мой класс CSS будет загружен позже (что должно располагать его иерархически выше css пользовательского компонента):

  • Измените порядок импорта в верхней части моего компонента (попытался сделать это первым, попытался сделать это последним; ничего не сработало)
  • попытался использовать события жизненного цикла (componentDidMount) и динамически импортировать css, затем
  • попытался загрузить css с таймером (например, подождите 2 секунды, а затем класс import())
  • использовал идентификатор :global в моем классе scss

Тем не менее, ничто не изменило порядок этого класса. Я что-то упустил или что мне нужно сделать, чтобы убедиться, что он будет загружен должным образом?

0
Robert J. 15 Окт 2020 в 13:23

1 ответ

Лучший ответ

Как я тестирую, если мы хотим изменить текст в свойстве onChange, элемент управления не изменит стиль.
В качестве обходного пути вы можете попробовать изменить шрифт по умолчанию для жирного шрифта.

Код теста:

    .richtext strong{
        font-weight: 300!important;
      }

<RichText className={styles.richtext}
          onChange={(text)=>this.onChange(text)}
/>
private onChange = (newText: string) => {
    
  return newText;
}

Результат испытаний: введите описание изображения здесь Или вы можете попросить дополнительную помощь в pnp control github .

0
Amos_MSFT 16 Окт 2020 в 09:14