Эффект наведения попутного ветра не работает в компоненте React
У меня есть компонент React под названием «Кнопки», и, как следует из названия, этот компонент используется для всех кнопок в моем проекте. Чтобы этот компонент был полностью динамичным, я решил получить цвет фона кнопок из реквизита (цвет фона — класс попутного ветра). Тогда я решил поставить на кнопку класс наведения, чтобы при наведении мыши на кнопку цвет фона увеличивался на 100 единиц.
Компонент кнопки
export default function Button({ bg = "", children }) {
let bgColor = bg.split("-")
bgColor[2] = (+bgColor[2] + 100).toString()
let hoverEffect = "hover:" + bgColor.join("-")
return (
<button className = {`${bg} ${hoverEffect} flex items-center justify-center gap-2 rounded-lg p-2 outline-none border-none transition-all cursor-pointer`}>
{children}
</button>
)
}
Использование компонента кнопки
<Button bg = {"bg-sky-500"}>
submit
</Button>
Для этого я реализовал логику JavaScript этой программы, но в итоге при добавлении этого класса в компонент ничего не происходит. В чем проблема?
Ответы 2
При создании динамических классов нам необходимо добавить эти классы в список надежных источников в файле Tailwind.config.js.
Пример, демонстрирующий использование списка надежных отправителей:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
safelist: [
{
pattern: /bg-(.*)-(.*)/,
variants: ['hover'],
},
],
theme: {
extend: {},
},
plugins: [],
}Просто проверьте bg,hoverEffect и убедитесь, что они работают так, как вы ожидали.
Если нет, попробуйте разделить эту строку:
bgColor[2] = (+bgColor[2] + 100);
bgColor[2] = bgColor[2].toString()
Здесь также есть логическая ошибка: если bg выглядит примерно так bg-blue-900, то ваш код преобразует его в bg-blue-1000 в CSS попутного ветра, это максимум 900, я думаю!