提问人：shekhar 提问时间：10/17/2023 更新时间：10/17/2023 访问量：42
如何将左边填充覆盖到组件内的角度组件中
How to override padding-left into angular component within component
问：
我正在尝试覆盖 .container-fluid 的 padding-left 属性
container-fluid {
padding-right: 16px;
padding-left: 16px;
margin: 0 auto;
width: 100%;
}
.container-fluid 类存在于父组件“detail-component.ts”中
尝试使用 .normal-footer 类替换它
{
padding-left: 0px !important;
margin-left: -16px !important;
}
.normal-footer 类存在于子组件“app-footer.ts”中
我已将该app-footer.ts添加到detail-component.ts
我想删除从左侧突出显示的空间
提前致谢
如果提出重复的问题，我们深表歉意。
尝试添加图像但出现错误。
答：
-3赞
Mudassar Mustafai
10/17/2023
#1
要覆盖子组件中 .container-fluid 类的 padding-left 属性，您应该使用更具体的 CSS 选择器，因为 .container-fluid 类似乎已经在父组件中定义。您希望确保子组件中的样式优先。这是你如何做到的：
在子组件的 CSS （.normal-footer） 中，使选择器更具体，以确保它优先：
通过在 .container-fluid 之前包含 .normal-footer，可以确保这些样式专门应用于具有 normal-footer 类的元素中的 .container-fluid 元素。
确保子组件 （app-footer.ts） 包含在父组件 （detail-component.ts） 中，以便子组件中的样式可以影响父组件的内容。
验证 CSS 是否已正确加载并应用于元素。您可以使用浏览器开发人员工具来检查元素，并查看是否正在应用样式。
通过执行这些步骤，您应该能够使用 normal-footer 类专门针对子组件中的元素覆盖 .container-fluid 类的 padding-left 属性。
.normal-footer .container-fluid {
padding-left: 0 !important;
margin-left: -16px !important;
}
评论