Ant-Select样式初始化

臧小川

已于 2022-05-13 12:30:37 修改

阅读量1.4k

点赞数

分类专栏： React日常组件文章标签： css3 javascript css

于 2022-05-11 15:03:23 首次发布

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/124710518

版权

React日常组件专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Ant Design库中的Select组件，并结合CSS自定义样式，实现在React应用中下拉选项的动态样式和交互。展示了如何设置默认值、禁用选项、监听选中事件以及修改背景、字体颜色等视觉效果。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

JS

import styles from './style.less'
import { Select } from 'antd';
const { Option } = Select;

const selectData = [
    { name: '羽神', id: 1, value: 'ys' },
    { name: '少主', id: 2, value: 'sz' },
    { name: '关羽', id: 3, value: 'gy' },
    { name: '二弟天下第一', id: 4, value: 'edtxdy' },
]
const index = () =>
{
    const handleChange = (value, item) =>
    {
        console.log(`selected ${value}`, item);
    }
    return (
        <div style={{ width: '120px' }} >
            <Select defaultValue={selectData[1].value} style={{ width: '100%', background: 'rgba(250,250,250,0)' }} onChange={handleChange}>
                {selectData.map((data, index) => (
                    <Option key={index} value={data.value} disabled={data.id === 3 ? true : false}>{data.name}</Option>
                ))}
            </Select>
        </div >
    );
};
export default index

CSS

:global {

  // 下拉框背景颜色
  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    position: relative;
    background: rgba(21, 31, 45, 0.5);
    border: 1px solid rgba(26, 193, 255, .8);
    border-radius: 8px;
    // 过度动画
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  // 下拉框高度
  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
  }

  // 设置文字颜色以及大小
  .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
  .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
    font-size: 18px;
    font-weight: 400;
    color: #D0E6FF;
  }

  // 箭头大小以及位置
  .ant-select-arrow {
    top: 50%;
    right: 11px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    color: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    pointer-events: none;
  }

  // 隐藏三角
  .ant-select-arrow .anticon {
    vertical-align: top;
    transition: transform 0.3s;
    display: none;
  }

  // 自定义三角
  .ant-select-arrow {
    cursor: pointer;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid rgba(26, 193, 255, .8);
  }

  // 设置未选中的字体颜色
  .ant-select-item {
    color: rgba(1, 4, 14, 0.9411764705882353);
  }

  // 未选中背景颜色
  .ant-select-dropdown {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #000000;
    border-radius: 4px;
  }

  // 选择时候的颜色
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: blank;
  }

  // 选中时的字体颜色 以及背景颜色
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    color: rgb(115, 115, 168);
    background: rgba(26, 193, 255, .8);
  }
}