Question

我有一个使用md-list-item指令的组件。

该指令将生成一个名为md-list-item的类的div。

问题是我无法在组件的styles属性中向md-list-item类添加样式。

@Component({
  selector: 'my-component',
  template: `
    <a md-list-item>
    </a>
  `,
  styles: [`
    .md-list-item{
      // I would like to be able to add css rules
      // for the md-list-item class here
    }
  `]
})

有没有办法在组件样式属性中编辑md-list-item类？

Answer 1

我一直想知道同样的事情！我不得不求助于在材料组件上做几个内联样式。我希望文档中有关于它的信息。

快速修复但不理想...... <p md-line style="margin: 5px;"

Answer 2

所以基于您提供的代码，有几件事情：

您实际上将md-list-item作为属性指令传递，而不是指令选择器。实际元素本身是a标记; Angular使用属性md-list-item为其附加功能，但您无法像使用CSS 类选择器一样选择它。

根据规范，可能更容易做到这一点：

<md-list>
  <md-list-item>
    <a href="your-link-here">Other List Content Here</a>
  </md-list-item>
</md-list>

并将其定位为：

/*notice we're selecting an element and not a class*/
md-list-item { 
  style: stuff;
}

md-list-item a {
  text: stuff
}

这应该可以更好地使用MD指令，并允许它们按原样包装内容。

如果由于某种原因这对您不起作用，您可以向<a md-list-item>添加一个类并以此方式定位，或者您可以使用CSS属性选择器：

a[md-list-item] {
  ....
}

......虽然一般情况下要慢很多。

编辑 Here's a Plunker of all three solutions.

从组件的样式访问材料设计项的类

2 个答案: