添加新的 css 或管理 react-bootstrap css答案

【问题标题】：adding new css or manage react-bootstrap css添加新的 css 或管理 react-bootstrap css
【发布时间】：2020-03-28 05:30:41
【问题描述】：

我正在做一个反应项目。我正在使用反应引导。但是，您知道您对引导程序有限制。例如，我正在使用导航栏，但我想更改导航栏的颜色。但是你有我认为6-7个选项。或者，我想更改导航栏的尺寸。这些只是示例，您可以对 react-bootstrap 拥有的每个组件进行相同的思考。如何管理引导程序的 css？还是我应该使用自己的 CSS？或者我应该为不同的事情使用其他框架？

我可以更改我的整个项目并使用 material-ui 进行编写，但同样的事情也会发生。请告诉我你的想法。

【问题讨论】：

这能回答你的问题吗？ Customizing Bootstrap CSS template

标签： reactjs bootstrap-4 material-ui react-bootstrap

【解决方案1】：

我对 React 的经验很少，但在其他框架（VUE、Angular）中，我通过导入 bootstrap.scss 来修改引导变量。之后，只需使用您自己的更改所需的 scss 变量，它应该可以工作。

【讨论】：

谢谢。让我知道什么是scss？我将探讨它是什么，但如果您有任何关于它的文档或示例。这对我来说很棒
scss 是样式表模板语言。在 css 中，您只需编写普通的 css 代码，但在 css 中，您编写带有变量的 css。但它也需要编译。为此，您可以使用 gulp。 google 里有很多例子。也取决于你的框架。例如，在最新的 Angular 中，从 scss 到 css 的生成是由 Angular 本身完成的。也许 React 也有类似的东西。
您也可以使用更强大的 css 规则覆盖所需的一切。取决于你想怎么做。
哦，谢谢。我刚刚搜索并做出反应也支持sass。我会努力的。你有任何教程或指南吗？
不。但谷歌应该提供帮助。这是很常见的用法。

【解决方案2】：

您可以更改此 stackoverflow issue 中描述的引导文件。

或者

如果您需要小的特定更改，您也可以在本地更改您的 css。最好的方法是将它们放在一个单独的 .css 文件中，并在每个样式的末尾添加 !important 以确保它们适用。

例子：

p {
   color: red !important;
}

【讨论】：

建议尽量少用!important规则
您也可以只更改 scss 文件中的 1 个变量，从而正确生成多个 css 规则，而无需覆盖它们。