在react next 中使用rem_使用createnextapp來建立基于next架構的react應用項目搭建

這裡使用腳手架

create-next-app

來建立項目

使用指令

下載下傳安裝就好了

執行個體如下

然後建立一個基于

next

架構的

react

項目 如

create-next-app test-demo
           

這裡建立一個名為

test-demo

的項目

執行個體如下

此時得到的項目結構如圖

然後

ui

架構這裡使用

react-semanti-ui

安裝

或者直接打開項目中的

package.json

填入

後執行

npm install

即可

想要讓

ui

生效, 則需要在

pages/_app.js

這個檔案中引入

semantic.min.css

另外

如果需要自定義

css

, 可将

_app.js

更改成如下

import React from 'react';
import App from 'next/app';
import 'semantic-ui-css/semantic.min.css'
import styles from "../styles/Home.module.css"


class MyApp extends App {
static async getInitialProps ({ Component, ctx }) {
let pageProps = styles;
console.log(styles)
if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

return { pageProps };
  }

  render () {
const { Component, pageProps } = this.props;

return (
<Component {...pageProps} />
    );
  }
}
export default MyApp;
           

這個

Home.module.css

中存放的就是自定義的

css

樣式

在後續自己定義的元件中傳入的參數預留一個

pageProps

即可 如

author: cg

create time: 2020-12-07 15:40