antd select 组件中仅显示部分图像

Question

我想显示一些图像作为选择中的选项。 如何调整所选对象的高度？

这是我的代码：

import { Form, Image, Layout, Select } from "antd";
import { React } from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout style={{ margin: 0, padding: 0 }}>
            <Content style={{ padding: "0px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <Select multiple mode="tags">
                            <Select.Option value="1">
                                <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="2">
                                <img src="https://pro.kmysistem.com/images/ghs02.png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="3">
                                <img src="https://pro.kmysistem.com/images/ghs03.png" style={{ width: 50 }} />
                            </Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;

结果是：

如何在 GHS 部分显示整个图像。 我尝试更改选择组件的高度，但没有成功。

Answer 1

我终于做到了。 ConfigProvider 可以解决问题

这是最终代码：

import { ConfigProvider, Form, Image, Layout, Select } from "antd";
import { React } from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout>
            <Content style={{ padding: "20px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <ConfigProvider
                            theme={{
                                components: {
                                    Select: {
                                        multipleItemHeight: 50,
                                    },
                                },
                            }}
                        >
                            <Select mode="tags">
                                <Select.Option value="1">
                                    <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50 }} />
                                </Select.Option>
                                <Select.Option value="2">
                                    <img src="https://pro.kmysistem.com/images/ghs02.png" style={{ width: 50 }} />
                                </Select.Option>
                                <Select.Option value="3">
                                    <img src="https://pro.kmysistem.com/images/ghs03.png" style={{ width: 50 }} />
                                </Select.Option>
                            </Select>
                        </ConfigProvider>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;