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

Question

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

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

预期结果：在我的组件中使用背景指定字段 实际结果：StyledButton 具有默认引导背景

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

我目前正在我的 index.js 中导入 bootstrap，如下所示：

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

有没有办法强制它最后加载？我也在使用 create-react-app 就像在 codepen 中一样

我不想放

&&&{
}

围绕我所有的风格。

Answer 1

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