Question

我有两个组成部分：

LoginLayout应该是Login组件的高阶补偿
Login组件是页面

我需要使登录页面具有图像作为背景。我试图通过CSS来实现这一点，但它不起作用。

以下是LoginLayout个补偿：

export default ({ children, title }) => (

// I tried to add background: url(.../img)) to this login-layout class
  <div className="login-layout">
    <Head>
      <title>Login to Tex</title>
    </Head>
    <div className="login-wrapper">{children}</div>
  </div>
);

如何在Next.js中实现？

Answer 1

确保已将CSS附加到组件上，如@Deano所述。

import './style.css';

如果您使用CSS模块导入，则改为：

import styles from './MyStyles.module.css';

export default ({ children, title }) => (
  <div className={styles.loginLayout}>
    <Head>
      <title>Login to Tex</title>
    </Head>
    <div className={styles.Login-wrapper}>{children}</div>
  </div>
);

如何在Next.js中将图像设置为背景？

1 个答案: