样式化的组件+ reactstrap如何在其他样式表之后导入引导样式表

Question

我需要在一些项目中使用引导程序，但我遇到的一个问题是，由于某种原因，引导程序样式表的优先级高于样式化的组件样式。

import "bootstrap/dist/css/bootstrap.
const StyledButton = styled(Button)`
  background: blue;
`;

预期结果：在组件中使用背景specifield 实际结果：StyledButton具有默认的引导背景

此处的示例：https://codesandbox.io/s/p2wz01wnz7

我目前正在这样导入index.js中的引导程序：

import "bootstrap/dist/css/bootstrap.css";

是否有一种方法可以强制其最后加载？我也使用create-react-app，就像在代码笔中一样

我不想放

&&&{
}

围绕我的所有样式。

Answer 1

您可以将此导入语句放在html文件标题的底部。如果您具有css或scss导入，则将其放在其下方。