ant-design的使用注意

270 阅读1分钟

可以参考下面链接

ant-design(默认的组件)ant-design-prolayout(高级表格组件)moble-ant-design(h5组件)

使用过程都很简单,直接根据文档样式来就行了,最麻烦的是样式不好找出来修改

使用过程中可以使用 className 参数

引入(import) css 文件,使用新修改 ant 的样式即可

例如:

.modelInput .ant-input-wrapper{
    background-color: #3F4143;
    color: #FFF !important;
}

.modelInput .ant-input-search-button {
    background-color: #3F4143;
    color: #FFF;
}

可以在 index.css 入口的 css 文件中默认导入 ant-design 的默认 css 效果(否则可能一些实际使用中展示不出来),有黑暗主题白色主题,看自己更喜欢哪一个吧,然后把不符合样式的调整一下即可

//默认的白色主题
@import '~antd/dist/antd.css';

//黑暗主题
@import '~antd/dist/antd.dark.css';

样式什么的不好找,直接通过 debug 调试 (mac 谷歌浏览器 fn + F12ctrl + option + i 即唤出调试界面) 通过 elements 节点查找对应的 element属性 即可,然后更改其样式

image.png