html - 如何在自定义组件之外配置纸张输入容器( polymer 混合)样式？

Question

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

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

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

但是，当将相同样式的部分复制到 html 上并使用 paper-input-container 时，它不会占用。有没有办法在自定义 polymer 组件之外应用这些 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 mixin 和属性仅在 custom-style 中应用到 Polymer 中:

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

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

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