reactjs – 未应用加载到React app中的一些CSS

发布时间：2020-12-15 16:18:21 所属栏目：百科来源：网络整理

导读：我正在用React Static Boilerplate构建一个反应应用程序. 每个组件都有一个这样的目录结构： MyComponent/-- MyComponent.css-- MyComponent.js-- package.json 在MyComponent.js文件中,我正在进行原始导入’./MyComponent.css’ 假设我的CSS包含这样的内容

我正在用React Static Boilerplate构建一个反应应用程序.

每个组件都有一个这样的目录结构：

MyComponent/
-- MyComponent.css
-- MyComponent.js
-- package.json

在MyComponent.js文件中,我正在进行原始导入’./MyComponent.css’

假设我的CSS包含这样的内容：

body { background-color: orange; }
.card { background-color: purple; }

并且我的组件中的渲染功能呈现一张卡片：

render() {
  return (
    <div className="card">Hello World</div>
  );
}

页面的主体将变为橙色,但卡片不会变成紫色.

为什么这个css没有完全应用于生成的HTML？

解决方法

根据React Static Boilerplate网站,他们使用CSS模块 – 这可以解释为什么正文标记被尊重但类选择器不被尊重.

https://github.com/css-modules/css-modules

尝试导入样式表,如下所示：

从’./MyComponent.css’导入样式;

在组件中使用它如下：

< div className = {styles.card}> something！< / div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!