使用 React styled-components 全局应用 bootstrap 主题

Question

我试图搜索示例，展示如何使用样式组件在全局范围内导入和使用 bootstrap 主题，但只能找到显示组件样式的示例（例如 https://github.com/aichbauer/styled-bootstrap-components) or recreating the css in injectGlobal (e.g. https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd）。

我不能完全把它们放在一起，所以我想问一下导入 bootstrap css 一次的过程是什么，以便字体、字体大小等设置在全球范围内生效。我在想：

    injectGlobal`
  @import url(‘url.to.bootstrap.css ');

  /* Hopefully there is a solution where I don't have to recreate these 
     settings because its achieved by the above import
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
  */
`

更新： 这按预期工作。谢谢西蒙。

injectGlobal`
  @import url(‘https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
`

Answer 1

您有两个选择：

用 import 加载 css:

import 'path/to/bootstrap.css'

或者像你在 @import 中提到的那样：

injectGlobal`
 @import url(‘https://path/to/bootstrap.css');
`

也许这篇文章可以帮助您： https://dev.to/spences10/getting-started-with-styled-components---5c04

使用 React styled-components 全局应用 bootstrap 主题

apply bootstrap theme globally using react styled-components

css

reactjs

styled-components