如何为第 3 方 css 框架应用样式 bootstrap

Question

Im working on react web app which has less file for its styling. As shown below, EnPage is a 3rd party component, which has content within it, Actually the main element class "page-body" has some styling issue, so I want to overwrite it with a styling fix

<div class="Banner">
  <EnPage>
     <div class="page">
       <main class="page-body"> ...</main>
     </div>
    </EnPage>
 </div>

在 chrome devtools 中悬停时，我可以看到

.page-body {
  padding-right : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
  padding-left : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
}

In dev tools, if set these both attributes to 0, then it fixes styling issue

.page-body {
      padding-right : 0;
      padding-left : 0;
    }

Now how to do this code , like the below?

.Banner {
  --page-content-screen-lg-horizontal-padding : 0;
}

Answer 1

通常，第三方 material 会生成自定义类样式元素。通常，它们的类会在您的之后被输入，以确保它们的样式优先于继承的或以前定义的样式。

你应该尝试的事情：

1 - 阅读 material 库的文档。根据您使用的 material 库，它们可能会提供一种自定义方式来超越它们的基本样式。有些会，有些则不会。请务必检查他们的文档，看看 case.This 是否始终是最佳选择，因为您确保 material 将按设计工作并且不会导致任何错误或冲突。

2 - 为您的元素指定一个 id，并将您的自定义样式放在 id 上。这是有效的，因为 CSS 样式是根据特定优先级定义的。由于 ids 比类更具体，这些样式优先于类.[=15 定义的样式=]

示例：

html:

<main class="page-body" id="page-body"> ...</main>

css:

#page-body {
  padding-right: 0;
  padding-left: 0;
}

3 - 如果其他方法似乎都不起作用并且您确实需要替换 material 样式，则可以使用 !important。但请注意，这是一个 不好的做法，许多人说 !important 一开始就不应该存在，就好像你需要使用它是因为你不理解 css 优先规则，你只是在破解 css 逻辑。

暂且不谈这个问题，您可以在您的声明之后放置 !important，这将对可能存在的任何其他规则实施您的规则。

示例：

.page-body {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

我有没有提到这是个坏主意？

如果您想了解更多关于 css 优先级的信息：

What is the order of precedence for CSS?
https://css-tricks.com/precedence-css-order-css-matters/

如何为第 3 方 css 框架应用样式 bootstrap

How to apply styling for 3rd party css framework like bootstrap

javascript

css

styling

less

reactjs