Question

我在角度2中遇到了一个问题。我安装了一个新组件（这个：https://github.com/kekeh/mydatepicker），我正在尝试改变它的风格。更确切地说，我想改变输入元素的border-radius。我不知道如何在不更改此组件的源代码的情况下执行此操作。是否有可能从父组件访问样式？。

让我分享一些我想做的代码。在我的组件中我有这样的东西：

<my-date-picker required></my-date-picker>

我想在css中做这样的事情：

my-date-picker input {
  border-radius : 0px;
}

请注意，在组件中，边框半径设置为4px。感谢

Answer 1

在自定义css文件中。过度骑行如下

.mydp, .mydp .headertodaybtn, .mydp .selection, .mydp .selectiongroup, .mydp .selector {
 border-radius:15px
}

Answer 2

通常，我会覆盖app.component.css中的样式。为此，请在导入component

后在app.component.ts ViewEncapsulation装饰器中添加此行

import {Component, ViewEncapsulation, OnInit} from '@angular/core';

然后

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css'
  ],
  encapsulation: ViewEncapsulation.None
})

然后在app.component.css中添加您的样式。由于app.component是您的根组件，因此此组件中应用的任何样式也将应用于app-root中加载的组件。

希望这有帮助。

encapsulation

的参考

Answer 3

将此代码粘贴到 override.css ：

中

.mydp, .mydp .headertodaybtn, .mydp .selection, .mydp .selectiongroup, .mydp 
.selector {
     border-radius:0 !important;
}

希望这会奏效。

如何在角度2中更改下载的子组件的CSS样式？

3 个答案: