您如何正确地将 CSS 类添加到反应组件（带有损坏的示例）？

Question

我刚刚从一个教程开始了一个 React 应用程序，并且一直在认真地学习它。然而，我很早就看到我认为我从 CSS 文件正确导入的类没有出现在输出中。我期望带有“主”标签的元素有 16 像素的边距。 CSS 文件称为 Layout.css，与使用它的 JavaScript 文件 (Layout.js) 位于同一目录中。 CSS 文件中只有一个类 Content，当我运行应用程序时，我看不到页面上的样式（16 px 边距）并在工具（chrome 开发工具）中检查页面，我没有看到样式选项卡下的样式。这是 CSS 文件（src/components/Layout/Layout.css）：

.Content {
    margin-top: 16px;
}

这里是JS文件（src/comonents/Layout/Layout.js）：

import React from 'react';

import Auxi from '../../hoc/Auxi';
import classes from './Layout.css'

const layout = (props) => (
    <Auxi>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main className={classes.Content}>
            {props.children}
        </main>
    </Auxi>
);

export default layout;

我不认为这是问题的一部分，但为了完整起见，这里是应用程序中的其他三个 JS 文件。 src/App.js:

import React from 'react';

import Layout from './components/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';

function App() {
  return (
    <div>
      <Layout>
        <BurgerBuilder />
      </Layout>
    </div>
  );
}

export default App;

src/hoc/Auxi.js:

const auxi = (props) => props.children;

export default auxi;

src/containers/BurgerBuilder.js：

import React, { Component } from 'react';

import Auxi from '../../hoc/Auxi';

class BurgerBuilder extends Component {
    render() {
        return (
            <Auxi>
                <div>Burger</div>
                <div>Build Controls</div>
            </Auxi>
        );
    }
}

export default BurgerBuilder;

为了更加完整，这里是 src 目录结构：

这是我在运行 Chrome 浏览器时看到的内容：

回顾一下：我曾尝试在具有一个类的 React 应用程序中使用 CSS 文件。尝试使用该类时，我看不到样式并且不确定原因。谁能提供一些见解？

Answer 1

不确定你的问题是什么，但代码看起来有点不对。

进行如下更改

import React from 'react';
import Auxi from '../../hoc/Auxi';
// *** change here ***
import from './Layout.css'

const layout = (props) => (
    <Auxi>
        <div>Toolbar, SideDrawer, Backdrop</div>

        // *** change here ***
        <main className="Content">
            {props.children}
        </main>
    </Auxi>
);

export default layout;'

请参阅 cmets // *** change here *** 了解我更改的行。