React（SPFx - Sharepoint 框架）：导入的控制顺序 css 类

Question

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

我已经尝试了以下方法来确保我的 CSS class 将在稍后加载（应该将其分层放置在自定义组件的 css 之上）：

• 更改组件顶部的导入顺序（尝试先导入，尝试最后导入；没有任何效果）
• 尝试使用生命周期事件 (componentDidMount) 并动态导入 css 然后
• 尝试使用计时器加载 css（例如，等待 2 秒，然后 import() class）
• 在我的 scss class
中使用了 :global 标识符

然而没有任何东西改变这个 class 的顺序。我是否遗漏了什么或我需要做什么才能确保它按预期加载？

Answer 1

据我测试，如果我们想在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;
}

测试结果： 或者您可以尝试在 pnp control github.

中寻求进一步的帮助