Question

我尝试搜索一些示例，这些示例显示了如何使用样式化组件全局导入和使用bootstrap主题，但是只能找到显示组件样式（例如https://github.com/aichbauer/styled-bootstrap-components）或在injectGlobal中重新创建css的示例（例如https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd。

我不能完全将它们组合在一起，所以我问一次导入引导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主题

1 个答案: