时间戳

首页 > 解决方案 > 使用 react styled-components 全局应用引导主题

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

问题描述

我试图搜索显示如何使用 styled-components 全局导入和使用引导主题的示例，但只能找到显示组件样式的示例（例如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');
`

标签： cssreactjsstyled-components

解决方案

你有两个选择：

加载css import：

import 'path/to/bootstrap.css'

或者像你提到的@import：

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

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

推荐阅读