css 如何将padding-left覆盖到组件内的Angular 组件中

gmxoilav 于 2023-10-21 发布在 Angular

关注(0)|答案(1)|浏览(128)

我正在尝试重写.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中
我想删除左边突出显示的空间
在此先向您表示感谢，如果您问了重复的问题，请向您道歉。
尝试添加图像但出错。

css

来源：https://stackoverflow.com/questions/77303976/how-to-override-padding-left-into-angular-component-within-component

1条答案

按热度按时间

uemypmqf1#

要在子组件中覆盖.container-fluid类的padding-left属性，您应该使用更具体的CSS选择器，因为.container-fluid类似乎已经在父组件中定义了。您希望确保子组件中的样式具有优先级。你可以这样做：
在子组件的CSS（.normal-footer）中，使选择器更具体以确保其优先级：
通过在.container-fluid之前包含.normal-footer，可以确保这些样式应用于.container-fluid元素，特别是具有normal-footer类的元素中的元素。
确保子组件（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;
}

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何将padding-left覆盖到组件内的Angular 组件中

1条答案

相关问题

热门标签

最新问答