实习日记8:ui修改样式符合主题

52 阅读1分钟

ant想要改他的主题有两种方式,一种是通过他的api,另一种即使样式覆盖一个个来,由于定制化需求,我这用的就是样式覆盖,所以,做一下总结:

下拉框select的样式包括两部分,一个部分是输入框,一部分是下拉菜单,一般覆盖的话,最好用important最高级,不然的话,可能优先级不够,特别是背景和边框颜色这类;

于是antselect这个大的,一般改不了什么,要改里面的东西, image.png

因为它是被覆盖的,所以没啥用, 要改输入框的话,一般是这个

image.png

然后要改变选中的item的样式的话,就是这个:

.ant-select-outlined.ant-select-multiple .ant-select-selection-item {
  background: rgba(255, 255, 255, 0.04);
}

巧妙啊,这个在多选情况下被选中到输入框的选项,

.ant-select-selection-item-remove要移除的那个图标;

.ant-select-dropdown 下拉菜单,

.ant-select-item-option-selected下拉菜单选中项;

顺便学了一下less怎么使用变量,用@;

接下来可能会补一下关于less的和主题相关的技巧,周末补