英文:
Change CSS only for single component
问题
我正在使用Angular开发项目，在这个项目中，我需要仅更改当前组件的CSS类。我正在像这样做：
选择器：'app-container',
模板URL：'./app.component.html',
样式：[
`.cd1-overe{
top: auto !important;
}
.cd1r .cd2{
top: 7rem !important;
}`
],
封装：ViewEncapsulation.None
通过这样做，CSS会更新所有组件，因为这个更改应用于全局CSS。
英文:
I am working on a project in angular, where I need to change the CSS class only for the current component. I am doing something like this:
selector: 'app-container',
templateUrl: './app.component.html',
styles: [
`.cd1-overe{
top: auto !important;
}
.cd1r .cd2{
top: 7rem !important;
}`
],
encapsulation: ViewEncapsulation.None
By doing this, the CSS is updated for all of the components, because this change is applied to global CSS.
答案1
得分: 1
不要将封装模式设置为 None。使用这个模式和 !important 修饰符会导致组件的 CSS 规则覆盖全局 CSS 规则。
改为将封装模式设置为 Emulated 或者直接删除它（因为 Emulated 是默认值）。在这种情况下，你也不需要 !important 修饰符。
英文:
Don't set the encapsulation mode to None. With this and with the !important modifier the component css rules are overriding the global css rules.
Instead of this set the encapsulation mode to Emulated or just delete it (because Emulated is the default). And in this case you won't need the !important modifier also.
答案2
得分: 1
只更改当前组件的CSS类，请使用组件特定的样式。默认情况下，Angular会将样式封装在组件的样式数组中，以确保它们不会影响其他组件。
尝试以下步骤来实现：
从您的组件装饰器中删除封装：ViewEncapsulation.None 行。这将恢复到默认的封装模式，即 ViewEncapsulation.Emulated。
像下面这样使用组件特定样式定义您的组件：
@Component({
selector: 'app-container',
templateUrl: './app.component.html',
styles: [
`
.cd1-overe {
top: auto !important;
}
.cd1r .cd2 {
top: 7rem !important;
}
`
]
})
通过这样做，您定义的样式将仅应用于 app-container 组件内的HTML元素，不会影响Angular应用中的其他组件。
如果您在HTML端未使用任何附加类或内联样式，则可能不必使用 !important 标志。
英文:
To change the CSS class only for the current component, use component-specific styles. By default, Angular encapsulates the styles within the component's styles array, ensuring they do not affect other components.
Try the following steps to do it:
Remove the encapsulation: ViewEncapsulation.None line from your component decorator. This will revert to the default encapsulation mode, which is ViewEncapsulation.Emulated.
Define your component with component-specific styles just like below:
@Component({
selector: 'app-container',
templateUrl: './app.component.html',
styles: [
`
.cd1-overe {
top: auto !important;
}
.cd1r .cd2 {
top: 7rem !important;
}
`
]
})
By using this, the styles you define will only apply to the HTML elements within the app-container component, and won't affect other components in your Angular application.
You may not have to use the !important flag if you are not using any additional class or inline styles on the HTML side.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论