применять тему начальной загрузки глобально, используя активные компоненты

Question

Я пытался найти примеры, показывающие, как импортировать и использовать тему начальной загрузки в глобальном масштабе, используя styled-компоненты, но смог найти только примеры, показывающие стилизацию компонентов (например, https://github.com/aichbauer/styled-bootstrap-components) или воссоздание CSS в injectGlobal (например,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

У вас есть два варианта:

Загрузить 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