css - CSS 不适用于 jsx

Question

这是名为 Layout.css 的 css 文件:

.Content {

      margin-top: 16px;
      color : red;

}

这是名为 Layout.js 的组件:

import React from 'react';
import classes from './Layout.css';
// const Fragment = React.Fragment;
const { Fragment } = React;

const Layout = (props) => {
  return (
    <Fragment>
      <div> toolbar , sidedrawer , backdrop </div>

      <main className={classes.Content}>{props.children}</main>
    </Fragment>
  );
};

export default Layout;

问题是 css 不适用于组件，我的几个组件都有这个问题。

Answer 1

您必须像这样导入您的 css 文件:

import './Layout.css';

然后像这样使用这个类:

<main className="Content">{props.children}</main>