css 如何样式大圆包裹小圆_nextJS的三种css使用方法

最新推荐文章于 2023-04-26 16:59:55 发布

祁银皓

最新推荐文章于 2023-04-26 16:59:55 发布

阅读量876

点赞数

文章标签： css 如何样式大圆包裹小圆

本文链接：https://blog.csdn.net/weixin_35201342/article/details/112090187

版权

写在前边：本文中react组件、页面均使用tsx。其中官方的类型说明，翻了很长时间，大家可以复制粘贴

1. 全局用法

打开pages目录下_app.js，这里以引入antd的css为例

import App from 'next/app';

import 'antd/dist/antd.css'; // 这里的css样式直接作用于Container组件

const Container = ({ Component, pageProps }) => {
    return (
        <Component {...pageProps} /
    )
}

Container.getInitialProps = async (appContext) => {
    const appProps = await App.getInitialProps(appContext);
    return {
        ...appProps,
    };
}
export default Container;

nextJS会把_app.js导出的组件作为page的父组件，也就是说这里的Container实际上是个超级wrapper，每次路由跳转都会先用这个wrapper包裹page再渲染。

想要css按需引入，需要配置babel-plugin-import，请参考antd官网

Ant Design of React - Ant Designant.design

2. css module

这也是我本人最喜欢的一种用法。使用方法如下

根目录下创建compotents文件夹，新建Board.tsx、Board.module.css文件。

Board.tsx

import style from './Board.module.css';

interface BoardProps { }

const Board: React.FC<BoardProps> = (props) => {

    return (
        <div className={style.title}>component Board title</div>
    )
}

export default Board;

Board.module.css

.title {
    color: red;
}

底层会按webpack某个loader的配置，为标签生成一个特定的className，由此不会造成css冲突

美中不足是style没有代码提示，需要自己写.d.ts定义模块，我觉得没多大必要

3. css in js

顾名思义，把css和jsx写在一起

import { NextComponentType } from 'next';
import { NextRouter } from 'next/router';
import Head from 'next/head';

interface LIstInitialProps { }

interface LIstProps extends LIstInitialProps {
    router: NextRouter;
}

const LIst: NextComponentType<any, LIstInitialProps, LIstProps> = (props) => {
    return (
        <>
            <Head>
                <title>List Page</title>
            </Head>
            <div>List Page</div>
            <style jsx>{`
                div {
                    color: blue;
                }
            `}</style>
        </>
    )
}

LIst.getInitialProps = () => {
    return { }
}


export default LIst;