Javascript 如何在react程序中使用外部css文件

所以我用react创建了一个网页，它可以生成随机引用。 这是网页的代码：

@导入url（'https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Ubuntu:wght@300&显示=交换'；
#根{
位置：相对位置；
}
#报价箱{
利润率：150px0-225px；
填充：20px；
位置：绝对位置；
最高：50%；
左：50%；
宽度：450px；
边界半径：8px；
z指数：1；
背景：#fff；
}
#正文{
字体系列：“劳拉”；
字体大小：25px；
}
#作者{
字体系列：“Lato”；
字体大小：20px；
文本对齐：右对齐；
}
#新报价{
字体系列：“Ubuntu”；
颜色：#fff；
}
.链接{
填充物：5px；
}
法兰西{
}

警方主色军军军民色=[“ţBDB76BBBB76B”和“228B22”、“00FA9A”、“808000”、“808000”、“808000”、“80808000”、“6B86军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军民民色=[[[“BDBBBBB76B”、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、“D2691E”、“#778899”、“#40E0D0”、“#F0E68C”]；
让index=Math.floor（Math.random（）*20）；
常量QuoteBox=函数（道具）{
返回(

{props.quotes[props.randomIndex].quote}
-{props.quotes[props.randomIndex].author}
{props.onClick（）}className=“btn btn block”style={{{background:mainColor[props.randomIndex]}>新引号

);
}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
引述：[
{引述：'你要么像英雄一样死去，要么活到足以看到自己变成恶棍的地步。'，
作者：《哈维·登特》，
{引用：'生活中最大的荣耀不在于从不跌倒，而在于每次跌倒后都能站起来。'，
作者：《纳尔逊·曼德拉》，
{引述：'开始的方法是停止说话，开始行动。'，
作者：《沃尔特·迪斯尼》，
{引用：“你的时间是有限的，所以不要浪费时间过别人的生活。不要被教条所束缚——那就是生活在别人思考的结果中。”，
作者：《史蒂夫·乔布斯》，
{引用：'如果生命是可预测的，它将不再是生命，没有味道。'，
作者：《埃莉诺·罗斯福》，
{引述：“如果你看你在生活中拥有的东西，你将永远拥有更多。如果你看你在生活中没有的东西，你将永远不会拥有足够。”，
作者：《奥普拉·温弗瑞》，
{引述：“如果你设定的目标高得离谱，这是一次失败，那么你的失败将超过其他人的成功。”，
作者：《詹姆斯·卡梅隆》，
{引用：“生活就是当你忙于制定其他计划时发生的事情”，
作者：《约翰·列侬》，
{引述：“无论你走到哪里，都要传播爱。让任何人来到你身边，都会感到更快乐。”，
作者：《特蕾莎修女》}，
{引用：“当你到达绳子的末端时，在绳子上打个结，然后抓住它。”，
作者：《富兰克林·D·罗斯福》，
{引用：“永远记住你是绝对独一无二的。就像其他人一样。”，
作者：《玛格丽特·米德》，
{引述：“世界上最好、最美丽的东西是看不见甚至摸不着的——它们必须用心去感受。”，
作者：《海伦·凯勒》，
{引用：“谁快乐，别人也会快乐。”，
作者：《安妮·弗兰克》，
{引用：“告诉我，我就会忘记。教我，我就会记住。让我参与，我就会学习。”，
作者：《本杰明·富兰克林》，
{引述：“最终，重要的不是你生命中的岁月，而是你生命中的岁月。”，
作者：《亚伯拉罕·林肯》，
{引述：“生活中的许多失败都是那些在放弃时没有意识到自己离成功有多近的人。”，
作者：《托马斯·A·爱迪生》，
{引述：“生活从来都不公平，也许对我们大多数人来说不公平是件好事。”，
作者：《奥斯卡王尔德》，
{引用：“只有为他人而活的生命才有价值。”，
作者：《阿尔伯特·爱因斯坦》，
{引述：“我们生活的目的是幸福。”，
作者：《达赖喇嘛》，
{引用：“热爱你的生活，过你热爱的生活。”，
作者：'鲍勃·马利'}
],
随机索引：Math.floor（Math.random（）*20）
}   
}
GeneratorDomainIndex（）{
this.setState（{randomIndex:Math.floor）(
const quoteBoxStyle = {
    margin: "150px 0 0 -225px",
    padding: "20px",
    position: "absolute",
    top: "50%",
    left: "50%",
    width: "450px",
    borderRadius: "8px",
    zIndex: "1",
    background: "#fff",
}

<div id="quote-box" className="container-fluid" style={quoteBoxStyle}>

return (

  <div>

  <h1-tag>Hello Style!</h1-tag>

  <p>Add a little style!.</p>

  </div>
);