前言
在做antd表单时通常会用到select组件,如何修改antd组件的默认样式想必大家都知道,那么我们如何将select组件修改为UI图中的样式呢,如下图所示
直接修改css
js
import React from "react";
import {
Select, Icon } from 'antd';
import styles from "./MySelect.less";
const {
Option } = Select;
class MySelect extends React.Component {
handleChange = (value) => {
console.log(`selected ${
value}`);
}
render() {
return (
<div className={
styles.root} >
<Select
defaultValue="year"
// open // 固定展开,便于调试
onChange={
this.handleChange}
dropdownClassName={
styles.dropdownClassName}
suffixIcon={
<Icon type="caret-up" />}
>
<Option value="year">近一年</Option>
<Option value="month">近一月</Option>
<Option value="day">近七日</Option>
</Select>
</div>
);
}
};
export default MySelect;
less
@selectBackgroudColor: #02112e;
@selectTextColor: #00e1ff;
@optionBackgroudColor: #0c3d7f;
@optionActiveBackgroudColor: #1669dd;
@optionTextColor: #fff;
.root {
:global {
.ant-select {
border: 1px solid #2c65bc;
border-radius: 4px;
}
.ant-select-selection {
width: 80px;
height: 24px;
border: none;
border-radius: 2px;
box-shadow: none;
font-size: 14px;
color: @selectTextColor;
background-color: @selectBackgroudColor;
}
// 选择器右侧图标样式
.ant-select-arrow {
font-size: 14px;
color: @selectTextColor;
}
// 选择器内文字样式
.ant-select-selection__rendered {
line-height: 24px;
}
}
}
// 此处类名需要放在最外层,因为option的dom不在当前组件内
.dropdownClassName {
background-color: @optionBackgroudColor;
:global {
.ant-select-dropdown-menu-item {
height: 24px;
padding: 1px 12px;
font-size: 14px;
line-height: 24px;
color: @optionTextColor;
background-color: @optionBackgroudColor;
}
// 选中样式
// .ant-select-dropdown-menu-item-selected {
// background-color: red;
// &:hover {
// background-color: red;
// }
// }
.ant-select-dropdown-menu-item-active {
background-color: @optionActiveBackgroudColor;
&:hover {
background-color: @optionActiveBackgroudColor;
}
}
}
}
显示效果
依据官方API修改
js
import React from "react";
// import PropTypes from "prop-types";
import {
Select, Icon } from 'antd';
import styles from "./SelectUserDefine.less";
const {
Option } = Select;
class SelectUserDefine extends React.Component {
handleChange = (value) => {
console.log(`selected ${
value}`);
}
render() {
// 该属性设置类名为dropdown的元素样式
const dropdownStyle = {
border: '1px solid red',
}
// 该属性设置类名为dropdown-menu的元素样式
const dropdownMenuStyle = {
backgroundColor: 'green',
}
return (
<div className={
styles.root} >
<Select
defaultValue="year"
// open // 固定展开,便于调试
onChange={
this.handleChange}
dropdownStyle={
dropdownStyle}
dropdownMenuStyle={
dropdownMenuStyle}
suffixIcon={
<Icon type="caret-up" />}
>
<Option value="year">近一年</Option>
<Option value="month">近一月</Option>
<Option value="day">近七日</Option>
</Select>
</div>
);
}
};
// SelectUserDefine.propTypes = {
// className: PropTypes.string,
// style: PropTypes.object,
// };
// SelectUserDefine.defaultProps = {
// className: "",
// style: {},
// };
export default SelectUserDefine;
显示效果
审查元素效果
