我爱编程

ANTD-色彩空间

2018-07-26  本文已影响0人  菜菜菜菜_97

今天主管要我自己找一下方法修改Table的样式,即改变其中的某些行的背景色。一开始我奔着修改全局样式去了,后来发现自己越走越偏,仔细读了一下官网上Table的属性,发现只要用rowClassName修改即可

rowClassName={(record, index) => record.sex ==='男' ? styles.test : ''}

image.png
颜色随便找了一个不过感觉怎么搭配都是很丑,于是上官网找了一下色彩搭配的方案

链接:https://ant.design/docs/spec/colors-cn

首先修改 .roadhogrc文件

{
  "entry": "src/index.js",
  "theme": {
    "primary-color": "#eb2f96"
  },
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }] 
        
      ]
      
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime",
       ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }] 
      ]
    }
  }
}

其中,我添加了theme,以及修改style:css变成style:true

我挑了两个颜色做实验:


样式一
样式二

正如官网说的,已经生成了完整的色板


【完】

上一篇 下一篇

猜你喜欢

热点阅读