Tener este método clsx que funciona bien:
const getLinkClasses = (disabled: boolean) => { return clsx('flex whitespace-nowrap', { 'text-gray-500': !disabled, 'text-gray-300 cursor-not-allowed': disabled }); }; Hay otras dos variables opcionales, una para disabled y otra para !disabled que son cadenas y pueden agregar nuevas reglas al método anterior. Llamémoslos disabledValue y notDisabledValue .
Por ejemplo,
const disabledValue = 'bg-red-100'; const notDisabledValue = 'bg-green-100';Para agregar esas variables, he realizado los siguientes cambios:
export interface MyProps { disabledValue?: string; notDisabledValue?: string; } const getLinkClasses = (disabled: boolean, style: MyProps) => { const notDis = `text-gray-500 ${style.notDisabledValue ?? ''}`; const dis = `text-gray-300 cursor-not-allowed ${style.disabledValue ?? ''}`; return clsx('flex whitespace-nowrap', { notDis: !disabled, dis: disabled }); }; El problema es que esas dos variables, notDis y dis no se leen:
Se declara 'notDis' pero su valor nunca se lee.ts(6133)
A 'notDis' se le asigna un valor pero nunca se usa.eslint@typescript-eslint/no-unused-vars
¿Hay alguna forma de arreglarlo?
El problema es que desea utilizar "nombres de propiedad calculados".
Algo como esto en ES6+:
const getLinkClasses = (disabled: boolean, style: MyProps) => { const notDis = `text-gray-500 ${style.notDisabledValue ?? ''}`; const dis = `text-gray-300 cursor-not-allowed ${style.disabledValue ?? ''}`; return clsx('flex whitespace-nowrap', { [notDis]: !disabled, [dis]: disabled }); };