html - CSS 不适用于 React 应用程序中的 HTML
问题描述
在 React 应用程序上,我有一个saSpinner.js
文件。import
Spinner.css
Spinner.js
代码:
import React from 'react';
import classes from './Spinner.css';
const spinner = () => (
<div className={classes.Loader}>Loading...</div>
);
export default spinner;
Spinner.css
代码:
.Loader,
.Loader::before,
.Loader::after {
border-radius: 50%;
}
.Loader {
color: #521751;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.Loader::before,
.Loader::after {
position: absolute;
content: '';
}
.Loader::before {
width: 5.2em;
height: 10.2em;
background: #fff;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.Loader::after {
width: 5.2em;
height: 10.2em;
background: rgb(184, 10, 10);
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
当页面加载时,我得到的是:
<div>Loading...</div>
这意味着已经执行了回退,并且由于某种原因尚未将 CSS 代码应用于 HTML 。我该如何找出这个原因?
编辑:两者Spinner.js
都Spinner.css
在同一个文件夹中。
解决方案
只是import './Spinner.css'
并在您的组件中使用<div className="Loader">... </div>
推荐阅读
- javascript - json-schema 中有没有办法验证匹配正则表达式的对象键?
- python - 为什么我通过 pip 安装了模块后仍收到“没有名为 scipy 的模块”错误?
- api - 有没有办法从 Medium 帖子中获取语言?
- flutter - Flutter 音频文件的完整路径
- ffmpeg - 使用 ffmpeg 和 force_original_aspect_ratio 从视频创建 PNG - 生成的 PNG 被压缩为 sample_aspect_ratio(而不是 display_aspect_ratio)
- excel - Office.js Office.context.ui.messageParent 在 Excel 中不起作用
- python - Pygame + Cron 触发功能
- python - 使用 VBA 运行 python 脚本
- php - PHP Word - 从模板中删除占位符,使其不留空隙(空行)
- javascript - PHP 将十进制时间转换为 H:M:S