css - react css 类不适用

Question

我正在尝试将 margin-top 作为 CSS 类应用于我的初学者 react 元素。但是， margin 不适用。想知道是否有人可以澄清是否有问题？我使用 create-react-app 创建并在 package.json 文件中，它说我的 react-scripts 是 4.0.2 所以我相信这是支持的。只是不确定我做错了什么。div、p-tags 等中的每个内容都显示正常。我只是无法申请类(class)。

.Content {
    margin-top: 16px;
}

import React from 'react';
import Aux from '../../hoc/Auxillary';
import classes from './Layout.css';

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

export default layout;

Answer 1

改变这个:

import classes from './Layout.css';

到

import './Layout.css';

然后改变这个:

<main className={classes.Content}>

到

<main className={"Content"}>

---

如果您一心想像这样导入您的 css 文件:

import classes from './Layout.css';

将您的 CSS 文件名更改为 ./layout.module.css，然后以这种方式导入它:

import classes from './layout.module.css';

只有这样你才能访问 css 类名:

classes.Content

更多关于文件命名约定的信息:https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/