[Bug] Can’t change the bg color of the outside/border of Select listbox

NextUI Version: 2.4

Problem: I am unable to change the background color and or border of the list box rapper of the list box and dust. There is always a white sharp edged border around the select listbox.

Solution: An explanation of how to change control the UI of that outside portion of the wrapper. Please, see the code below for the current implementation of the Select component. I've also attached a screenshot below

Code:


<Select 
                                className="darkmw-[250px] "
                                classNames={{
                                    label: "group-data-[filled=true]:-translate-y-1",
                                    trigger: "min-h-16 ",
                                    value: "font-semibold text-[20px] text-white pr-10 ",
                                    listboxWrapper: "bg-black text-white",
                                    listbox: "max-h-60 overflow-auto  text-white rounded-lg bg-black",
                                    listBoxItem: "text-white",
                                    }}  
                                placeholder={walletAddress.address && walletAddress.address.length > 20 ? shortAddr(walletAddress.address, 7) : walletAddress.address}
                                size={"sm"}
                                onChange={async (e) => {
                                    if (e.target.value == "Add Wallet") {
                                        modalDisclosure.onOpen(true);
                                        return
                                    }
                                    else if (e.target.value == "Show MyWallets") {
                                        setShowMyWallets(true)
                                        setRefinedCryptoData(null)
                                        setRefinedNFTData(null)
                                        setTotalPortValue(null)
                                        setCryptoChain("all")
                                        setNftChain("all")
                                        // stringified the wallets via %2c
                                        let allMyWallets = myWatchlist?.mywallets.map(wallet => wallet.wallet_address).join("%2c")
                                        let allMyChains = myWatchlist?.mywallets.map(wallet => wallet.chain).join("%2c")
                                        setWalletAddress({address: allMyWallets, chain: "EVM"})
                                        let body = myWatchlist?.mywallets.map(wallet => ({address: wallet.wallet_address, chain: wallet.chain}))
                                        setCryptoAddress(body)
                                        setHideRemove(true)
                                        return
                                    }
                                    let valArr = e.target.value.split(",")
                                    let newChain = valArr[1]
                                    if (newChain == undefined) return
                                    setShowMyWallets(false)
                                    setRefinedCryptoData(null)
                                    setRefinedNFTData(null)
                                    setTotalPortValue(null)
                                    setHideRemove(false)
                                    setWalletAddress({address: valArr[0], chain: newChain}); 
                                    setCryptoAddress([{address: valArr[0], chain: newChain}])
                                    if (newChain == "EVM") {
                                        setCryptoChain("all"); 
                                        setNftChain("all")
                                    } else {
                                        setCryptoChain(newChain); 
                                        setNftChain(newChain.toLowerCase())
                                    }
                                }
                                }
                                listboxProps={{
                                    classNames: {
                                        base: "max-h-60 overflow-auto rounded-lg text-black shadow-none border-none",
                                    },
                                    itemClasses: {
                                        base: [
                                        "rounded-md",
                                        "text-white",
                                        "data-[selectable=true]:focus:bg-[rgba(140,140,140)]",
                                        ],
                                        title: [
                                        "text-white",
                                        ]
                                    },
                                    }}
                                    popoverProps={{
                                    classNames: {
                                        content: "p-0 border-small border-divider bg-background",
                                    },
                                    }}
                                // onSelectionChange={(e) => {return}}
                                renderValue={(item) => {
                                    let wa = item[0] != undefined ? item[0].key.split(",") : undefined
                                    return (
                                        <div> {wa != undefined ? wa[0].length > 20 ? shortAddr(wa[0], 7) : wa[0] : ""}</div>
                                    )
                                }}
                            >
                                {/* <SelectSection showDivider title="Actions"> */}
                                    <SelectItem className="dark text-black foreground-black" key={"Show All Wallets"} value={"Show All Wallets"}>
                                        Show All Wallets
                                    </SelectItem>
                                    <SelectItem className="dark text-black foreground-black" key={"Show MyWallets"} value={"Show MyWallets"}>
                                        Show MyWallets
                                    </SelectItem>
                                    {/* <SelectItem className="dark text-black foreground-black" key={"Add Wallet"} value={"Add Wallet"}>
                                        Add Wallet
                                    </SelectItem> */}
                                {/* </SelectSection> */}
                                {watchlistWallets && Object.entries(watchlistWallets).map(([chain, wallets]) => (
                                    <SelectSection showDivider title={chain} key={chain} className="text-black/50">
                                        {wallets.map((wallet) => (
                                                <SelectItem className="dark:data-[selectable=true]:focus:bg-indigo-500  dark:data-[hover=true]:bg-indigo-500 text-black" key={[wallet, chain]} value={[wallet,chain]}>
                                                    <div className="flex flex-row w-full justify-between ">
                                                        <div className="text-[13px] "> {wallet.length > 25 ? shortAddr(wallet, 18) : wallet} </div>
                                                        {/* <div onClick={async (e) => {e.stopPropagation(); }}>
                                                            {session.address.toLowerCase() != wallet.toLowerCase() && 
                                                            <HoverableSVG onClick={async () => { await modifyWalletAddress("remove", wallet, chain, "mywallets")}} svgName={"trash"} width={18} height={18} hoverFill={"red"}/>}
                                                        </div> */}
                                                    </div>
                                                </SelectItem>

                                        ))}
                                    </SelectSection>
                                ))}
                            </Select>

Pictures: I've attached a picture of the current design:

@wingkwong you're right, when i copy and paste that code into a blank repo as well, the code isn't there. when i get rid of the of any parents components in the original repo, the border and in ability to control that outer layer still exists. any idea on what configurations may be causing this by any chance? here's the depedencecies in the package.json. it seems like even copying and pasting select component examples cause ui problems. are there any conflicting problems that I should have know of? "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.3", "@mui/material": "^5.15.19", "@next/bundle-analyzer": "^14.2.3", "@nextui-org/react": "^2.4.2", "@rainbow-me/rainbowkit": "^2.1.2", "@rainbow-me/rainbowkit-siwe-next-auth": "^0.4.1", "@sanity/client": "^6.19.1", "@sentry/nextjs": "^7.116.0", "@tailwindcss/forms": "^0.5.7", "@tanstack/react-query": "5.0.0", "@vercel/analytics": "^1.3.1", "@vercel/speed-insights": "^1.0.11", "autoprefixer": "^10.4.15", "chart.js": "^4.4.3", "chartjs-adapter-moment": "^1.0.1", "class-variance-authority": "^0.7.0", "dompurify": "^3.1.5", "dotenv": "^16.4.5", "eslint-config-next": "^14.2.3", "ethers": "^5.7.2", "feedparser": "^2.2.10", "file-saver": "^2.0.5", "framer-motion": "^11.2.11", "fs": "^0.0.1-security", "html-react-parser": "^4.2.10", "html2canvas": "^1.4.1", "html2canvas-proxy": "^1.0.1", "ioredis": "^5.4.1", "lightweight-charts": "^4.1.4", "moment": "^2.30.1", "net": "^1.0.2", "next": "^14.2.3", "next-auth": "^4.24.7", "next-pwa": "^5.6.0", "next-sitemap": "^4.2.3", "next-transpile-modules": "^10.0.1", "nprogress": "^0.2.0", "pnpm": "^9.2.0", "postcss": "^8.4.29", "postcss-import": "^15.1.0", "pusher-js": "^8.3.0", "react": "^18.3.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.3.1", "react-intersection-observer": "^9.10.3", "react-pdf": "^7.7.3", "react-router-dom": "^6.23.1", "react-switch": "^7.0.0", "react-toastify": "^9.1.3", "rss-parser": "^3.13.0", "sanity": "^3.45.0", "sharp": "^0.33.4", "siwe": "^2.3.2", "swr": "^2.2.5", "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss": "^3.4.4", "tls": "^0.0.1", "viem": "^2.13.7", "wagmi": "^2.9.10", "web3": "^4.9.0", "xml2js": "^0.6.2" },

nextui-org / nextui

[Bug] Can’t change the bg color of the outside/border of Select listbox #3288