AMIS低代码平台，前端开发常见问题(样式篇css style)

最近项目是基于amis低代码平台开发的，在开始开发的时候并未接受系统的学习，导致开发过程中遇到很多问题。

由于，

部分问题在文档中不能解决，

且，

当前搜索引擎找到关于amis的文档非常有限。

故，

整理在开发过程中遇到的问题以供参考。

 

本片主要说明的是关于样式（css，style）

1.对于可以在页面上能找到配置对应位置的样式，可以直接配置。

 

2.对于个别需要修正的样式，可以直接添加在代码中。页面中的组件都可以添加属于自己的样式（分栏不支持）。

{
  "type": "container",
  "body": [
    {
      "type": "tpl",
      "tpl": "专题研究",
      "inline": true,
      "wrapperComponent": "h3",
      "id": "u:ce120b6a0c22",
      "style": {
        "color": "#fff"
      }
    }
  ],
  "size": "xs",
  "style": {
    "position": "static",
    "display": "block",
    "flex": "1 1 auto",
    "flexGrow": 1,
    "flexBasis": "auto"
  },
  "wrapperBody": false,
  "isFixedHeight": false,
  "isFixedWidth": false,
  "id": "u:7bd6e9872d7d"
}

上述代码中，container和tpl都添加了属于自己的样式。

敲重点：

（1）.css中的“-”，需要换成驼峰形式。不支持“flex-grow”这种形式。

（2）.在改代码的时候，一定要保证代码正确，否则编译错误会导致整个页面报错。

 

3.需要修改amis整体样式，或者重复部分较高，手动添加比较耗时，可以新增一个css文件。可覆盖之前的样式，也可以自定义名称，添加样式。

步骤如下：

（1）新增css文件。

（2）将需要修改的css添加到文件中。

（3）将css文件放到项目所在目录中\apps\bmc\page\bmc-page-config\amis中。

（4）将css文件引入index.html中，并确保不会被之前的样式覆盖。

 

至此，样式就可满足开发需求。