Использовать внешний шрифт для встроенного CSS в React.js

Question

Привет всем,

Я пытаюсь создать список дел в реакции, и там я хочу изменить шрифт на что-то внешнее, например, Montserrat или Roboto.К сожалению, я использую CSS встроенным способом.Я не уверен, как добавить внешний CSS.Обычно я копирую и вставляю фрагмент @import, который выглядит следующим образом:

@import url('https://fonts.googleapis.com/css?family=Roboto');

Вот мой код для моего TodoItem (файл для отдельного элемента todo)

import React from 'react'

function TodoItem(){
    const styleSpan = {
        fontSize:50,
        fontFamily:"Roboto",
        borderRadius:10
    }
    const styleCheckbox = {
        width:50,
        height:50,
        marginRight:50,
        backgroundColor:"#edc2d6",

    }
    return(
        <div>

            <input type = "checkbox" style = {styleCheckbox}></input>
            <span style={styleSpan}>Todo item here</span>
        </div>
    )
}

export default TodoItem

чтобы использовать встроенный CSS, вы должны поместить ваши параметры стиля в объект.Это может работать, когда у вас есть два коррелирующих значения, но почти невозможно для отдельных значений.

Как добавить внешний шрифт при кодировании для встроенного CSS?

Answer 1

Вы можете импортировать CSS в родительский файл CSS и изменить семейство шрифтов.

Создано DEMO .В этой демонстрации я импортировал CSS в файл style.css и изменил значение font-family на Roboto