Question

我们正在尝试关闭纸张输入容器样式，以便我们可以在输入框周围设置所有边框，并且无需关注动画。

在定制聚合物组件中，我们通过在自定义聚合物组件样式部分中禁用以下mixin来获得我们想要的东西：

- 纸输入容器下划线
--paper输入容器下划线为中心

然而，当将相同的样式部分复制到html并使用纸张输入容器时，它没有采取。有没有办法在定制聚合物组件之外应用这些mixin？我猜我的css语法错了。

<style>
    paper-input-container{
        --paper-input-container-underline: {visibility: hidden};
        --paper-input-container-underline-focused: {visibility: hidden};
    }
</style>

谢谢！

Answer 1

我认为你的意思是你将风格转移到index.html ......

首先，来自index.html的CSS mixins和属性仅在custom-style s中的Polymer中应用：

<style is="custom-style">
  ...
</style>

其次，您需要调整CSS选择器以定位paper-input-container，因为paper-input-container单独工作。如果您只想定位paper-input-container元素中的x-foo，那么您就写了：

x-foo {
  --paper-input-container-underline: {visibility: hidden};
  --paper-input-container-underline-focused: {visibility: hidden};
}

codepen

或者，如果您想定位任何元素中的所有paper-input-container，您可以使用:root（已弃用）或html作为您的选择器：

html {
  --paper-input-container-underline: {visibility: hidden};
  --paper-input-container-underline-focused: {visibility: hidden};
}

codepen

如何在自定义组件之外配置纸张输入容器（聚合物混合）样式？

1 个答案: