Question

我正在根据文档使用px-button-group设计组件 https://www.predix-ui.com/#/css/visual/buttons/px-button-group-design我在我的应用程序中安装了使用predix webapp starter（1.0.46发布版本）作为参考应用程序的组件。

在我的项目级别中，我们有index-inline.scss和seed-theme.scss，并且在elements文件夹中有scss文件，例如seed-app文件夹中的种子脚注下面有seed-app.scss seed-footer.scss。

根据我们的项目要求，我们在同一elements文件夹中创建了更多自定义聚合物元素。我们在views文件夹下有rmd-view.html，在rmd-view内，我们使用的是我们创建的自定义聚合物元素，例如rotor-view等，我们也使用相同的seed-app.html进行页面导航

在转子视图中，我们要使用px-button-group设计组件作为我安装的组件，并在对象层的index-inline.scss中使用以下代码（根据https://github.com/predixdesignsystem/px-getting-started#import-order）

$inuit-btn-group-background : #09819c;
$inuit-btn-disabled-border : true;
@import "px-button-group-design/_objects.button-group.scss";

，并在以下rotor-view.html中包含了px-butto-group代码

<div class="btn-group">
  <input id="id1" name="btn-group" type="radio">
  <label for="id1" class="btn">Label 1</label>
  <input id="id2" name="btn-group" type="radio">
  <label for="id2" class="btn">Label 2</label>
</div>

但是它没有用，然后我尝试在seed-app.scss中使用import，然后我也没用，然后尝试在rotor-view文件夹（位于元素内部）中创建名为rotor-view.scss的新scss文件。夹）对于上述所有情况，这也没有用，我正在获取html单选按钮，没有按钮组css适用于上述更改。

为了进行测试，我尝试在seed-app.html中使用px-button-group-design html代码，然后它们得到正确的按钮，但我想在转子视图中使用，就像我没有使用scss import一样正确的地点。

如果我想在rotor-view中使用px-button-group-design，谁能建议我。我应该在哪个scss文件中导入按钮组scss？

Answer 1

如果要在seed-app.html组件中使用px-button-group，则将其添加到.scss文件中，该文件将为seed-app.html组件生成样式。如果要在子组件的px-button-group中使用px-button-group，则将其添加到.scss文件中，该文件将为该组件生成样式。不要忘记用

导入样式

<link rel="import" href="../my-styles.html">

并且还使用

在DOM中包含样式。

<style include="my-styles"></style>

希望这会有所帮助。

无法使用predix px-button-group-design组件

1 个答案: