在 Reactivesearch v2 中覆盖或删除内联样式

Question

我正在使用 ReactiveList 来呈现结果。覆盖默认内联样式的最佳方法是什么？优化移除 Reactivesearch (2.13.0) 提供的所有默认样式。

例如如何删除 /packages/web/src/styles/result.js 中 sortOptions 提供的这些默认样式：

const sortOptions = css'
  color: #424242;
  height: 32px;
  font-size: 0.82rem;
  padding: 0 25px 0 10px;
  background: url(base64....) no-repeat 95% 50%;
  background-color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 0;
  outline: 1px solid #ddd;
  outline-offset: -1px;
';

Answer 1

我认为，inner 类 是目前合并样式的唯一方法。在您的情况下，innerClass 名称将是 sortOptions。

请查看文档 https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html#styles

使用自定义渲染器的另一种选择，我们可以为每个小组件提供渲染函数。

每个 UI 库都带有一些默认样式，目标是以最少的努力重用组件，即可以轻松扩展和覆盖现有样式。

如果您想完全控制 UI 组件，我会建议自定义渲染函数而不是 innerClass。

在 Reactivesearch v2 中覆盖或删除内联样式

Override or remove inline styles in Reactivesearch v2

reactivesearch