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

Question

我们正在尝试关闭纸质输入容器样式，以便我们可以为输入框设置四周边框，并且焦点上没有动画。

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

--paper-input-container-underline
--paper-input-container-underline-focused

但是，将相同样式的部分复制到 html 并使用 paper-input-container 时，它并没有占用。有没有办法在自定义聚合物组件之外应用这些 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-styles 中应用到 Polymer 中：

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

其次，您的 CSS 选择器需要调整以针对 paper-input-container，因为单独使用 paper-input-container 是行不通的。如果你只想定位 x-foo 元素中的 paper-input-containers，那么你会写：

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

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

How to configure paper-input-container (polymer mixin) style outside of custom component?

html

css

polymer

polymer-1.0