不能在组件中使用 App.css 中的类

Posted 2023-03-07

【中文标题】不能在组件中使用 App.css 中的类

【英文标题】：Can't Use Classes From App.css In Component

【发布时间】：2020-03-25 10:03:25

【问题描述】：

我在这个特定项目中遇到问题，我无法将“src/App.css”中定义的样式类用于“src/components/layout/Header.js”中的组件。

这很奇怪，因为我有另一个项目用于注释和参考，它可以正常工作..

我收到错误：

style 属性需要从样式属性到值的映射，而不是字符串。例如，使用 JSX 时 style=marginRight: spacing + 'em'。

src/App.css sn-p:

.header-dock
    width:100%;
    z-index:3

src/components/layout/Header.js sn-p:

import React,  Component  from 'react';

export class Header extends Component 
    render() 
        return (<div className='header-dock'></div>);
    

然后将标头标签添加到 App.js 的返回语句中，并依次渲染到 index.js 上的 DOM。

【问题讨论】：

尝试注释掉 App.js 中的所有其他组件，只留下标题 :) 因为我认为问题不在于标题，如果它仍然不起作用，请进行 stackblitz @ 987654321@你发链接后我会支持你

【参考方案1】：

如果没有，则需要将 CSS 导入到组件文件中。

import './App.css'

这是假设组件和 CSS 文件在同一个文件夹中。

编辑：

问题是组件中的杂散样式道具。添加括号style=margin: '10px'后，问题解决了。

【讨论】：

您好，App.css文件已经导入到App.js文件中，两者在同一个目录下。然后将 Header 组件添加到应用程序中，就像我在其他示例中看到的那样。不幸的是，即使在 Header 组件类本身上导入 CSS 文件也不能修复错误。

这看起来很奇怪。您是否尝试将样式放在*** index.css 文件中？这可能行得通，但直接导入样式不起作用似乎很奇怪。

我刚刚尝试使用 index.css 并给出了同样的问题。我可能只是要删除这个项目并重新创建一个新项目并重新开始，因为目前这肯定适用于我的另外 2 个项目。 create-react-app 完全是垃圾。

您的 App.js 文件或其他文件中是否有流浪的 style 道具？我不完全确定它与 CSS 文件有什么关系。如果您不小心使用了style 而不是className，那么我认为这可能是问题所在。

我花了一分钟才意识到错误在说什么哈哈。很高兴你明白了。

【参考方案2】：

替换

return <div className='header-dock'></div>;

进入

 return <div class='header-dock'></div>;

【讨论】：

您好，感谢您与我们联系。我刚试过这个。不幸的是，在进行此更改后，组件内的相同代码行也会出现相同的错误。