ReactSPFx-Sharepoint Framework：导入的CSS类的控制顺序

编程问答 2022-06-08

问题描述

在我的React解决方案中，我使用了一个名为RichText的自定义组件。该组件的问题在于，h2元素的一种样式具有我需要的不同的font-weight。我试图覆盖此自定义组件的默认样式，但是由于此属性设置为!important，因此我无法这样做（因为自定义组件样式的顺序优先于导入）。请参考下图：

enter image description here

我尝试了以下操作以确保以后将加载我的CSS类（应将其分层放置在自定义组件的css上方）：

  • 更改组件顶部的导入顺序（试图首先使进口，最后试图使进口；什么都不起作用）
  • 试图使用生命周期事件（componentDidMount），然后动态导入CSS
  • 试图使用计时器加载CSS（例如，等待2秒钟，然后再import()类）
  • 我的scss类中使用了:global标识符

但是，没有什么改变了此类的顺序。我是否缺少某些东西或需要做什么以确保将其按预期加载？

解决方法

经过测试，如果要更改onChange属性中的文本，则控件将不会更改样式。
解决方法是，您可以尝试更改默认的Bold函数font-weight。

测试代码：

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

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

测试结果： enter image description here 或者，您可以尝试在pnp control github中寻求进一步的帮助。

reactjsreactjsreactjsreactjssharepoint-onlinesharepointframeworkspfx