Question

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

这很奇怪，因为我有另一个项目可用于在此正常工作的笔记和参考。

我收到错误消息：

style道具期望从样式属性到值而不是字符串的映射。例如，使用JSX时，样式= {{marginRight：空格+'em'}}。

src / App.css代码段：

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

src / components / layout / Header.js代码段：

import React, { Component } from 'react';

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

然后将标头标记添加到App.js返回语句中，并依次将其呈现到index.js上的DOM。

Answer 1

替换

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

进入

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

Answer 2

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

import './App.css'

这是假定组件和CSS文件位于同一文件夹中。

编辑：

问题出在组件中一个流浪风格的道具。添加括号style={{margin: '10px'}}后，问题已解决。

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

2 个答案: