Next.js Discord

Discord Forum

React Select color change

Answered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
Maybe someone knows how to change the stroke of the Select button from react-select?
Below is the code:
<div className="z-[100]">
             <label className="block text-sm font-medium leading-6 text-gray-900">
                 {label}
             </label>
             <div className="mt-2 text-orange-500">
                 <ReactSelect
                     isDisabled={disabled}
                     value={value}
                     onChange={onChange}
                     isMulti
                     options={options}
                     menuPortalTarget={document.body}
                     styles={{
                         menuPortal: (base) => ({
                             ...base,
                             zIndex: 9999,
                         })
                     }}
                     classNames={{
                         control: () => "text-sm"
                     }}
                 />
             </div>
         </div>
Answered by English Lop
control: (provided, state) => {
    const border = state.isFocused  ? '2px solid red' : '2px solid gray'                          
    return {
    ...provided,
    boxShadow: undefined,
    border,
    '&:hover': { border: '2px solid red' },
    // '&:hover': { border } // If change only on focus
    }
},
View full answer

39 Replies

@Siamese Maybe someone knows how to change the stroke of the Select button from react-select? Below is the code: <div className="z-[100]"> <label className="block text-sm font-medium leading-6 text-gray-900"> {label} </label> <div className="mt-2 text-orange-500"> <ReactSelect isDisabled={disabled} value={value} onChange={onChange} isMulti options={options} menuPortalTarget={document.body} styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999, }) }} classNames={{ control: () => "text-sm" }} /> </div> </div>
Masai Lion
In following provided code, the styles prop allows you to customize the appearance of different elements of the react-select component. Specifically, we're targeting the control element, which includes the Select button.

<ReactSelect
    isDisabled={disabled}
    value={value}
    onChange={onChange}
    isMulti
    options={options}
    menuPortalTarget={document.body}
    styles={{
        menuPortal: (base) => ({
            ...base,
            zIndex: 9999,
        }),
        control: (provided, state) => ({
            ...provided,
            border: state.isFocused ? '2px solid red' : '2px solid gray', // Customize the border here
        }),
    }}
/>


We're using a function to dynamically determine the border style based on the state of the component. If the Select button is focused (state.isFocused), we set the border to '2px solid red', indicating a red border. Otherwise, if it's not focused, we set the border to '2px solid gray', indicating a gray border.
@Siamese Is it possible to specify a color like "orange-500"? Can I just specify the color without the shade?
Masai Lion
Yeah but you would need to do it with HEX like in this snippet:

<ReactSelect
    isDisabled={disabled}
    value={value}
    onChange={onChange}
    isMulti
    options={options}
    menuPortalTarget={document.body}
    styles={{
        menuPortal: (base) => ({
            ...base,
            zIndex: 9999,
        }),
        control: (provided, state) => ({
            ...provided,
            border: state.isFocused ? '2px solid #FFA500' : '2px solid gray', // Use hex value for orange-500
        }),
    }}
/>
With your parameters, I don't get exactly what I need.
Look at the video, how it looks, maybe there is some other parameter that changes the color of this select state.
@Siamese Fine. But the problem is that I need to replace the blue stroke color with orange-500.
Masai Lion
Then change the solid gray that is inside the code
Near the orange-500
@Masai Lion Then change the solid gray that is inside the code
SiameseOP
Here's what I have
Masai Lion
But are u writing 2px solid #FFA500?
Scissor-tailed Flycatcher
I think maybe you should add hover style
English Lop
Check with inspect what styles makes blue border, because can be :hover or box-shadow, then should overwrite these
@Masai Lion But are u writing 2px solid #FFA500?
SiameseOP
Yeah
@Siamese Doesn't work 😕
Masai Lion
Any errors on console?
Also are you sure nothing else is affecting the box?
Like on your globals file?
SiameseOP
<div className="z-[100]">
            <label className="block text-sm font-medium leading-6 text-gray-900">
                {label}
            </label>
            <div className="mt-2 text-orange-500">
                <ReactSelect
                    isDisabled={disabled}
                    value={value}
                    onChange={onChange}
                    isMulti
                    options={options}
                    menuPortalTarget={document.body}
                    styles={{
                        menuPortal: (base) => ({
                            ...base,
                            zIndex: 9999,
                        })
                    }}
                    classNames={{
                        control: () => "text-sm"
                    }}
                />
            </div>
        </div>

This is a complete piece of code that includes the style elements of the select element.
@Masai Lion Like on your globals file?
SiameseOP
I think that there is nothing like that.
@Siamese I think that there is nothing like that.
Masai Lion
no globals?
That isn’t the code I gave you lol
you declaring the border color on a div class name idk how to call it but you get it. Don’t u?
@Masai Lion you declaring the border color on a div class name idk how to call it but you get it. Don’t u?
SiameseOP
I have provided the full version of the code used for the select element. I used your code, but it didn't give the desired result, I talked about it above and recorded a short video. The color located in the className near the div is responsible for a completely different part of the color in the select element: it refers to the already selected internal elements and changes their color.
I mean, it should work the one that adds border to your style
styles={{
        control: (provided) => ({
            ...provided,
            border: '2px solid #f56565', // Use the hexadecimal color code here
        }),
    }}
@Masai Lion Interesting
SiameseOP
Definitely
@Masai Lion styles={{ control: (provided) => ({ ...provided, border: '2px solid #f56565', // Use the hexadecimal color code here }), }}
SiameseOP
This is the result I have with this code. The select color changes to red, and in the active state it remains blue. But this still does not change the situation because the button with a choice has turned into a place for input.
English Lop
control: (provided, state) => {
    const border = state.isFocused  ? '2px solid red' : '2px solid gray'                          
    return {
    ...provided,
    boxShadow: undefined,
    border,
    '&:hover': { border: '2px solid red' },
    // '&:hover': { border } // If change only on focus
    }
},
Answer
English Lop
Log "provided" styles to see which style keys need to overwrite, then inspect to see who comes from other styles like for now "boxShadow"
SiameseOP
Everything worked. I removed the '&:hover': { border: '2px solid red' },
and left only the one that changes focus.
Sincerely thank you all for your help!
[SOLVED]
@Siamese **[SOLVED]**
Masai Lion
But please use Apps and Mark as Solved on the message that solved it
It can be yours or any
Masai Lion
pls?