当我使用 angular 组件时，如何指定 css class？

Question

我在一个 angular 项目中，我尝试为我的 CSS 结构遵循原子设计方法和 BEM。

我有原子组件，有些有修饰符 css，当我调用我的组件时我不能使用它们，例如：

:host{
    .btn {
      padding: 0.7rem 1.7rem;
      border-radius: 1.8rem;
      border-color: transparent;

      &__headerFooter {
        @include btn($color: map.get(map.get( $btnStyle, btnColor), "btnHeaderFooterColor"));
      }
    }
  }

当我想在设置组件的页面中使用headerFooter时，它不起作用。 我尝试了不同的解决方案，但我还没有找到解决方案。

如果你想试试，这是我的项目： my-project

Answer 1

我在您的 GitHub 项目中找不到提到的代码，但是从我在您提供的代码中可以看到，您尝试 select &__headerFooter这不是有效的 scss 选择器。 您到底想使用这些下划线来实现什么？ 如果 'headerFooter' 只是宿主元素内的一个 DOM 节点，则应将这些下划线替换为空格：

:host{
    .btn {
      padding: 0.7rem 1.7rem;
      border-radius: 1.8rem;
      border-color: transparent;

      & headerFooter {
        @include btn($color: map.get(map.get( $btnStyle, btnColor), "btnHeaderFooterColor"));
      }
    }
  }