如何使用 SASS extend/customize bootstrap 的 class' 后代？

Question

我想通过扩展现有 bootstrap 样式来创建自定义 table 样式。问题是，我只想自定义样式的特定后代。即，我想通过 position: 'sticky'; top: 0;.

扩展 th 后代选择器的样式来使 header 具有粘性

为此，我在 custom.scss 文件中添加了以下内容：

@import '~bootstrap/scss/bootstrap';

.my-custom-table {
  @extend .table-striped;
  @extend .table-bordered;
  th {
    position: 'sticky';
    top: 0;
  }
}

当我在渲染逻辑中使用 class 时，如下所示：

<Table className='my-custom-table'/>

header 不粘。请注意，如果我在每个 th 单元格中使用样式，它会按预期工作。

感谢任何对我出错的地方的帮助。

Answer 1

一个非常愚蠢的错误。我不得不使用 sticky 而不是 'sticky'（注意引号），这解决了问题。

如何使用 SASS extend/customize bootstrap 的 class' 后代？

How to extend/customize a bootstrap's class' descendants using SASS?

css

sass

twitter-bootstrap

react-bootstrap