如何修改React info banner提示文本的颜色与font-family

方案1：通过组件API传入自定义样式（优先推荐） #

绝大多数弹窗提示组件的info方法都支持传入额外配置项自定义样式，你可以直接修改调用代码如下：

const updateProject = () => {
    const project = formik.values;
  
    if (JSON.stringify(initialValues || initialValues.apk ) == JSON.stringify(project)) {
      childalert.info(
        `No changes were done to the ${project.projectName} project`,
        // 第二个参数为配置项，可根据你所用childalert组件的实际API调整字段名
        {
          // 方式一：直接传入内联样式
          style: {
            color: "#1890ff", // 替换为你需要的目标色值
            fontFamily: "PingFang SC, Microsoft Yahei, sans-serif" // 替换为你需要的目标字体
          },
          // 方式二：传入自定义类名，在CSS文件中编写样式（优先级更高、更易维护）
          className: "custom-project-alert"
        }
      );

      // props.func("closePopup");
      return null;
    }
}

如果选择传入自定义类名的方式，在对应的CSS文件中添加如下样式即可：

.custom-project-alert {
  color: #1890ff;
  font-family: "PingFang SC, Microsoft Yahei, sans-serif";
}

方案2：全局覆盖默认样式 #

如果childalert组件不支持传入自定义样式参数，可以按照以下步骤操作：

• 打开浏览器开发者工具（F12），用元素选择器选中提示文本，获取它的默认类名
• 在全局CSS文件中覆盖对应类名的样式即可

举个例子，假设你查到提示文本的默认类名为.childalert-info-content，就添加如下样式：

/* 仅修改info类型提示的文本样式 */
.childalert-info-content {
  color: #1890ff;
  font-family: "PingFang SC, Microsoft Yahei, sans-serif";
}

如果不想全局覆盖影响其他页面的同类型提示，可以给当前页面的根容器加一个专属类名（比如.project-manage-page），限定样式生效范围：

.project-manage-page .childalert-info-content {
  color: #1890ff;
  font-family: "PingFang SC, Microsoft Yahei, sans-serif";
}

内容的提问来源于stack exchange，提问作者Sougata Mukherjee