amis自定义样式

在amis中自定义样式有四种方法：       

1. 使用 CSS 变量动态修改，通过这种方式修改大部分 amis 组件的样式，所有组件都会生效，注意这种方法不支持 IE11。
2. 使用辅助 class，可以对单个组件做定制修改。
3. 自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 scss\themes\cxd.scss 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。
4. wrapper 组件可以直接写内嵌 style。

{

  "type": "page",

  "cssVars": {

    "--text-color": "#CD3632",

    "--primary": "#CD3632",

    "--primary-onHover": "#F23F3A",

    "--primary-onActive": "#BB312D"

  },

  "body": {

    "type": "form",

    "body": [

      {

        "type": "input-text",

        "label": "文本",

        "name": "text"

      },

      {

        "type": "input-password",

        "label": "密码",

        "name": "password"

      }

    ]

  }

}

在 page 下可以设置 cssVars 属性，通过它来动态修改 amis 内的 css 变量。

辅助 class 参考自tailwindcss, 做了精简，把一些不常用的剔除了，响应式方面只保留 pc 和手机两种，css 未压缩版本大概是 800K 左右，比 tailwind 要小很多。

使用方法：

• JS SDK
  • 引入 sdk 中的文件 <link rel="stylesheet" href="sdk/ helper.css" />
• React
  • import 'amis/lib/ helper.css';

目前这个文件没有和主题文件合并在一起，用户可以选择性加载。

大部分 amis 组件都有 className 或者 xxxClassName 的配置，比如下面的配置给表单增加了边框、圆角和阴影

{

  "type": "page",

  "body": {

    "type": "form",

    "panelClassName": "border-solid border-2 border-blue-500 rounded-xl shadow-lg",

    "body": [

      {

        "type": "input-text",

        "className": "text-green-700",

        "label": "文本框",

        "name": "text"

      },

      {

        "type": "input-password",

        "label": "密码",

        "name": "password"

      }

    ]

  }

}

还可以：

• 通过 flex flex-shrink-0 来设置布局方式。
• 通过 bg-blue-100 bg-white 之类的类名设置背景色。
• 通过 shadow-md 设置投影。
• 通过 rounded-xl 设置圆角。
• 通过 text-xl、font-medium 设置字体大小粗细。
• 等等。。

辅助类——状态样式

除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）、focus（当前聚焦）或者 disabled（当前不可用）。

<button
  class="Button
  rounded-xl text-light
  bg-pink-400 border-pink-600
  hover:bg-pink-500 hover:border-pink-800
  active:bg-pink-600 active:border-pink-900"
>
  按钮示例
</button>

<button
  class="Button m-l-16
  rounded-xl text-light
  bg-pink-500 border-pink-800
  hover:bg-pink-500 hover:border-pink-800"
>
  悬停态
</button>

<button
  class="Button m-l-xs
  rounded-xl text-light
  bg-pink-600 border-pink-900
  hover:bg-pink-600 hover:border-pink-900"
>
  按下态
</button>

<button
  class="Button m-l-xs
  rounded-xl text-light
  disabled:text-dark disabled:bg-pink-200 disabled:border-pink-400"
  disabled
>
  禁用态
</button>

在 css 类名前面添加 hover: 表示在 hover 时启用这个样式比如

<button
  class="Button
  text-blue-500
  hover:text-red-500"
>
  蓝色按钮，hover 红色
</button>

 

标签：自定义,样式,text,css,设置,type,amis
来源： https://blog.csdn.net/qq_44753927/article/details/121477310