Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Override option text color in a select component#307

Unanswered
FilipBPaven asked this question inQ&A
Discussion options

I'm trying to get black option text without using darkmode...

This is my component:

import{Flex,FormControl,FormLabel}from"@chakra-ui/react";import{Select}from"chakra-react-select";import*asReactfrom"react";constSelectChoc=({})=>{constcolorOptions=[{value:"blue",label:"Blue",color:"#0052CC"},{value:"purple",label:"Purple",color:"#5243AA"},{value:"red",label:"Red",color:"#FF5630"},{value:"orange",label:"Orange",color:"#FF8B00"},{value:"yellow",label:"Yellow",color:"#FFC400"},{value:"green",label:"Green",color:"#36B37E"},];return(<Flexjustify="center"align="center"w="full"><FormControlp={4}><FormLabel>With variant="filled"</FormLabel><SelectcolorScheme="blackAlpha"focusBorderColor="blue.500"selectedOptionColorScheme="blue"isMultiname="colors"options={colorOptions}placeholder="Select some colors..."variant="filled"defaultValue={[{value:"blue",label:"Blue",color:"#0052CC"},{value:"purple",label:"Purple",color:"#5243AA"},]}/></FormControl></Flex>);};

export default SelectChoc;
However in my main page where i use the component i have this theme. And due to the color: "white", it makes the option text white as well.

consttheme=extendTheme({styles:{global:{body:{bg:"#0e0f11",color:"white",},},},});

Look at these picture:

  1. Before clicking the selector enter
    image

When showing options available enter
image

I still want to keep the theme on my page, but somehow make the text for the dropdown options black. Have tried everything. Would love some advice... :)

Cheers!

You must be logged in to vote

Replies: 1 comment

Comment options

The easiest way to implement this is using thechakraStyles prop. This is very simple to accomplish by settingcolor on the rootcontainer component, as all of the nested components are just inheriting their colors:

<SelectchakraStyles={{container:(provided)=>({      ...provided,color:"black",}),}}/>

This will also ensure that the controls (clear button and dropdown arrow) also inherit this color:

image

Now, if you're happy with the main control component becoming black when you focus it, this is all you need (you didn't mention anything about this). But it does make things very hard to see, so if you'd like to keep that light colored when you focus as well, add this to yourchakraStyles prop:

<SelectchakraStyles={{container:(provided)=>({      ...provided,color:"black",}),control:(provided)=>({      ...provided,_focusVisible:{bg:"white",},}),}}/>

This will ensure that everything is equally visible when your component is focused:

image

Here's a complete CodeSandbox example:https://codesandbox.io/p/sandbox/w9jf8j?file=%2Fcomponents%2Fselect-choc.tsx

And next time you have a question, it would be great if you could provide a CodeSandbox with a complete example with your question. It's much easier to provide help if I have a complete example of what you've tried to go off of.

You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@FilipBPaven@csandman
[8]ページ先頭
©2009-2025 Movatter.jp