react-select 添加边框红色

Question

我正在与

react-select

一起工作，我正在尝试添加红色边框：

这是我的组件选择：

import React from "react";
import ReactSelect, { GroupBase, Props } from "react-select";

export default function InputSelect<
    Option = {
        label: string;
        value: string;
    },
    IsMulti extends boolean = false,
    Group extends GroupBase<Option> = GroupBase<Option>
>(props: Props<Option, IsMulti, Group>) {
    return (
        <ReactSelect
            {...props}
            theme={(theme) => ({ ...theme, borderRadius: 0 })}
        />
    );
}

这一个是我的组件形式，只是我使用组件的部分

InputSelect

<InputSelect
    isClearable={true}
    onChange={(e) => {
        //@ts-ignore
        handlerChange("idlist", e?.value);
    }}
    options={list}  
    className={` ${active? 'border-red-500' : 'border-grey-500' } `}                        
/>

我只想在变量

active

为

true

时激活边框红色，目前它不起作用，怎么了？？

Answer 1

所以当 active 变量为 true 时，您似乎在尝试向 InputSelect 组件添加红色边框。但似乎您正在将 border-red-500 和 border-grey-500 类直接添加到 InputSelect 组件，这可能不起作用。

相反，您可以尝试将 className 属性传递给 InputSelect 组件内的 ReactSelect 组件。这是一个例子：

export default function InputSelect<
    Option = {
        label: string;
        value: string;
    },
    IsMulti extends boolean = false,
    Group extends GroupBase<Option> = GroupBase<Option>
>(props: Props<Option, IsMulti, Group>) {
    return (
        <ReactSelect
            {...props}
            theme={(theme) => ({ ...theme, borderRadius: 0 })}
            className={props.className}
        />
    );
}

这样，您传递给 InputSelect 的 className 道具将被传递给 ReactSelect 并正确应用。