React开发学习-css（emotion、antd）

craco安装

用于更改默认配置

npm i @craco/craco craco-less

根目录新增：craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              "@primary-color": "rgb(0, 82, 204)",
              "@font-size-base": "16px",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

更改package.json文件

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "json-server": "json-server __json_server_mock__/db.json --watch --port 3001 --middlewares ./__json_server_mock__/middleware.js"
  },

emotion的使用

安装：npm i @emotion/react @emotion/styled
安装后普通样式维护：

const Title = styled.h2`
  margin-bottom: 2.4rem;
  color: rgb(94, 108, 132);
`;

antd组件库样式维护：

export const LongButton = styled(Button)`
  width: 100%;
`;

flex与gird：

/**
 * grid 和 flex 各自的应用场景
 * 1. 要考虑，是一维布局 还是 二维布局
 * 一般来说，一维布局用flex，二维布局用grid
 * 2. 是从内容出发还是从布局出发？
 * 从内容出发：你先有一组内容(数量一般不固定),然后希望他们均匀的分布在容器中，由内容自己的大小决定占据的空间
 * 从布局出发：先规划网格(数量一般比较固定)，然后再把元素往里填充
 * 从内容出发，用flex
 * 从布局出发，用grid
 *
 */

样式组件封装：

export const Row = styled.div<{
    gap?: number | boolean;
    between?: boolean;
    marginBottom?: number;
  }>`
  display: flex;
  align-items: center;
  justify-content: ${(props) => (props.between ? "space-between" : undefined)};
> * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: ${props =>typeof props.gap ==='number'?props.gap+'rem':props.gap?'2rem':undefined};
  }
`;

有关TS中的object

TS中的object并不是指object
他还包括着对象中包含函数
所以当需要object时要用图中方法定义 避免出错