react-bootstrap-typeahead样式错乱如何强制启用组件默认样式

问题表现 #

相同业务代码在在线代码沙箱中运行时组件显示完全正常，本地项目中组件排版错乱、布局效果异常，异常效果参考：

经排查沙箱环境未给组件添加额外自定义样式，仅加载了组件默认样式，判断为本地项目存在样式缺失、或全局样式规则覆盖了组件默认样式导致渲染异常。手动逐行编写自定义样式修复成本较高，可通过以下方案快速强制启用组件默认样式。

参考实现代码：

import React, { useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';

const MyPicker = () => {
  const [selected, setSelected] = useState([]);
  const handleChange = (sel) => setSelected(sel);
  return (
    <div>
      <Typeahead
        multiple
        clearButton
        id="my-typeahead"
        labelKey="fullname"
        onChange={handleChange}
        options={[
          { fullname: 'Apple' },
          { fullname: 'Banana' },
          { fullname: 'Peach' },
          { fullname: 'Zucchini' },
        ]}
        placeholder="Select options..."
        selected={selected}
      />
    </div>
  );
};

export default MyPicker;

修复步骤 #

• 第一步：补全必需的依赖样式导入
  这类问题最高发的原因是本地项目漏引了组件依赖的基础样式文件——在线沙箱会自动注入组件依赖的全部样式，不需要手动写导入，本地项目需要手动在项目入口文件（或使用该组件的文件顶部）引入依赖样式：

// 引入组件依赖的Bootstrap基础样式
import 'bootstrap/dist/css/bootstrap.min.css';
// 引入typeahead组件自身的默认样式
import 'react-bootstrap-typeahead/dist/ReactBootstrapTypeahead.css';

引入后刷新页面，80%以上的样式错乱问题会直接解决。

• 第二步：隔离全局样式污染
  如果已经引入上述样式仍存在排版问题，说明是项目中的全局样式规则优先级过高，覆盖了组件默认样式。不需要逐行重写组件样式，只需要给组件增加一层样式隔离，强制重置外层样式对组件的影响即可：
  1. 给组件外层包裹容器增加专属类名：

<div className="typeahead-scope">
  <Typeahead
    multiple
    clearButton
    id="my-typeahead"
    labelKey="fullname"
    onChange={handleChange}
    options={[
      { fullname: 'Apple' },
      { fullname: 'Banana' },
      { fullname: 'Peach' },
      { fullname: 'Zucchini' },
    ]}
    placeholder="Select options..."
    selected={selected}
  />
</div>

2. 在全局样式文件中增加作用域样式，先重置外层继承的异常规则，再重新加载组件默认样式：

.typeahead-scope,
.typeahead-scope * {
  all: revert;
}
.typeahead-scope {
  @import 'react-bootstrap-typeahead/dist/ReactBootstrapTypeahead.css';
}

• 额外排查点
  如果上述操作后仍有局部样式异常，检查项目中是否存在作用范围过大的全局样式规则：比如强制给所有div、input、li、.form-control、.dropdown-menu等元素/类名设置了固定布局属性（如强制display: block、强制修改定位模式、全局重置margin/padding时未排除第三方组件节点），将这类规则的作用域收敛到自身业务组件范围内，不要作用于第三方组件节点即可。

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