Parse hover props in Tailwind-Styled-Components-CodePudding

I am trying to make a website with dark mode and want to parse the dark prop in tailwind-styled-components. In all places, excluding actions, like hover, active, focus etc, the props do work, but when I try to use hover and parse the darkMode prop, nothing works. The library I use is 'tailwind-styled-components'.

I have tried to use different approaches for the props, but none of them did work.

This is the part with the styling

export const NavbarListLI = tw.li`
   flex flex-row justify-between items-center
   mx-5 bg-slate-100 px-3 py-2 rounded-xl cursor-pointer
   ${({ dark }) => Colors(dark).buttons.primary}
   hover:${({ dark }) => Colors(dark).list.hover}
   hover:rounded-full
`

In here, dark and white mode are declared

import React, { useEffect } from "react"

const lightPalette = {
    background: "bg-white",
    greenish: "honeydew",
    defGray: "#aaa",
    orangeish: "rgba(255, 100, 25, 0.1)",
    kaki: "#62807e",
    light: "#e1e5f0",
    darkBlue: "#315481",
    lightBeige: "#eee",
    hotRed: "#ff3046",
    darkBrown: "rgba(34, 25, 25, 0.1)",
    mint: "#C1E1D2",
    whiteBg: "bg-white",

    buttons: {
        primary: "bg-black text-white",
    },
    list: { static: "bg-black", hover: "bg-slate-200" },
}

const darkPalette = {
    background: "bg-black",
    buttons: {
        primary: "bg-white text-black",
    },
    list: { static: "bg-white", hover: "bg-slate-800" },
}

const Colors = (darkMode) => (darkMode ? darkPalette : lightPalette)

export default Colors

CodePudding user response：

Tailwind CSS will need a full class name to function, unless otherwise specified in config file.

In this use case, because the property is just a fixed hover, it would make sense to just have the full hover class name in darkPalette.

Try edit the darkPalette:

const darkPalette = {
  background: "bg-black",
  buttons: {
    primary: "bg-white text-black",
  },
  // Keep the full class name here for Tailwind