@fish-kit/fish v3.13.0-beta.0

order: -2

title: Fish of React

浏览器支持

兼容 IE9+浏览器，兼容相关细节参见：兼容须知。

安装

使用 npm 安装

我们推荐使用 npm 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install @sdp.nd/fish --save

如果你未配置内网镜像，推荐执行如下命令进行配置：

$ npm config set registry="http://registry.npm.sdp.nd/"

建议为@sdp.nd/fish 配置别名 fish, 下面的描述中，都以配置了别名为例

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 fish。

我们在 npm 发布包内的 fish/dist 目录下提供了 fish.js fish.css 以及 fish.min.js fish.min.css

强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

示例

import { DatePicker } from 'fish';
ReactDOM.render(<DatePicker />, mountNode);

未使用按需加载，需要引入如下样式：

import 'fish/dist/fish.min.css';

按需加载

下面两种方式都可以只加载用到的组件。

• 使用 babel-plugin-import（推荐）。

   // .babelrc or babel-loader option
   {
     "plugins": [
       ["import", {"libraryName": "fish", "libraryDirectory": "lib", "style": true}] // `style: true` 会加载 less 文件
     ]
   }

  然后只需从 fish 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

  // babel-plugin-import 会帮助你加载 JS 和 CSS
  import { DatePicker } from 'fish';

• 手动引入

  import DatePicker from 'fish/lib/date-picker'; // 加载 JS
  import 'fish/lib/date-picker/style'; // 加载 LESS

自定义 fish 样式

fish 的样式满足不了业务需求的时候，需要覆盖样式时，可以采用如下两个方案。

方案一

1. 项目增加 less 变量文件，参见脚手架 less 文件。
2. 修改 style-loader，参见脚手架构建代码。

方案二

1. html 入口文件最外层增加 id
2. style 采用如下方式提升优先级，增加权重：

#app {
  .fish-row {
    margin-left: 10px;
  }
}