Разбор парящих реквизитов в Tailwind-Styled-Components

Я пытаюсь создать веб-сайт с темным режимом и хочу проанализировать темную опору в компонентах в стиле попутного ветра. Во всех местах, за исключением действий, таких как наведение, активация, фокусировка и т. д., реквизиты работают, но когда я пытаюсь использовать наведение и анализировать реквизит darkMode, ничего не работает. Библиотека, которую я использую, называется «компоненты в стиле попутного ветра».

Я пытался использовать разные подходы к реквизиту, но ни один из них не сработал.

Это часть со стилем

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
`

Здесь заявлены темный и белый режимы

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

javascript reactjs next.js tailwind-css styled-components

21.11.2022 18:29

[JS за 1 час] - 9. Асинхронный

JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...

Подъем в javascript

Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?

В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...

Хук useOnClickOutside в ReactJS

Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...

Хуки (часть-2) - useEffect

Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...

Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React

В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не думаю, что tailwindcss распознает ваши классы hover:*

Https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Вы не можете использовать hover:${({ dark }) => Colors(dark).list.hover}, вы должны использовать полную метку "hover:bg-black" и т. д.

21.11.2022 18:47

Ответ принят как подходящий

Для работы Tailwind CSS потребуется полное имя класса, если иное не указано в файле конфигурации.

В этом случае использования, поскольку свойство является просто фиксированным hover, имеет смысл просто указать полное имя класса наведения в darkPalette.

Попробуйте отредактировать darkPalette:

const darkPalette = {
  background: "bg-black",
  buttons: {
    primary: "bg-white text-black",
  },
  // Keep the full class name here for Tailwind 👇
  list: { static: "bg-white", hover: "hover:bg-slate-800" },
};

И в стилях также используйте полное имя класса:

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}
   ${({ dark }) => Colors(dark).list.hover}
   hover:rounded-full`;

Надеюсь, это поможет.

Это сделало трюк! Спасибо за ваше решение!

— 21.11.2022 19:17

21.11.2022 19:05