Как правильно добавить класс CSS в компонент реагирования (с неработающим примером)?

Question

Я только что запустил приложение React из учебника и внимательно следил за ним. Однако в самом начале я вижу, что класс, который, как мне кажется, я правильно импортирую из файла CSS, не отображается в выводе. Я ожидаю отступ в 16 пикселей в элементе с тегом 'main'. Файл CSS называется Layout. css и находится в том же каталоге, что и файл JavaScript (Layout. js), который его использует. В файле CSS имеется только один класс Content, и когда я запускаю приложение, я не вижу стиля (поле 16 px) на странице и просмотра страницы в инструментах (chrome dev tools) I не вижу стиль под вкладкой стилей. Вот файл 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;

Для дополнительной полноты вот структура каталогов sr c:

А вот что я вижу в браузере Chrome когда я его запускаю:

Итак, подведем итог: я попытался использовать файл CSS в приложении React с одним классом. При попытке использовать класс я не вижу стиля и не знаю почему. Может ли кто-нибудь дать некоторое представление?

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;'

См. Комментарии // *** change here *** для строк, которые я изменил.