时间戳

首页 > 解决方案 > 如何使用 SASS 扩展/自定义引导类的后代？

css - 如何使用 SASS 扩展/自定义引导类的后代？

问题描述

我想通过扩展现有的引导样式来创建自定义表格样式。问题是，我只想自定义样式的特定后代。即，我想通过将th后代选择器的样式扩展为position: 'sticky'; top: 0;.

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

@import '~bootstrap/scss/bootstrap';

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

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

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

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

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

标签： csstwitter-bootstrapsassreact-bootstrap

解决方案

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

推荐阅读