添加新css或管理react-bootstrap css

Question

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

我可以改变我的整个项目，并使用material-ui编写，但同样的事情也会发生。请让我知道你的想法。

Answer 1

我使用React的经验很少，但在其他框架(VUE，Angular)中，我通过导入bootstrap.scss来修改引导变量。在此之后，只需将所需的scss变量更改为您自己的变量，它就会正常工作。

Answer 2

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

或

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

示例：

p {
   color: red !important;
}