0

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

在此处输入图像描述

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

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

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

4

1 回答 1

0

正如我测试的那样，如果我们想改变 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在此处输入图像描述 中寻求进一步的帮助。

于 2020-10-16T09:14:13.937 回答