使用 react styled-components 全局应用引导主题

Question

我尝试搜索示例，显示如何使用 styled-components 全局导入和使用引导主题，但只能找到显示组件样式的示例（例如 https://github.com/aichbauer/styled-bootstrap-components）或在 injectGlobal 中重新创建 css（例如 @987654322 @)。

我不能把它们全部放在一起，所以我想问一下导入引导 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