0

I have a react component with text, the colour default set to grey or black depending if it is considered to "active" state.

I am trying to add an on hover to change the colour if it is grey (not active) to dark grey on hover, but not to hover if it is black.

So far I have this component,

<a className="hover:text-green-500" style={{color: activePage === 'example' ? 'black' : "rgba(107, 114, 128)"}} > Example</a>

The "style=..." is preventing the hover:... from working and I also have the second problem of only want the hover effect to work if the current colour is not black, I am trying to give a UI improvement for indication. I am using tailwind CSS here with React.

So in summary, if Black, hover does nothing. If grey (i.e. set to "rgba(107, 114, 128)") the hover should set it to "hover:text-green-500"

Hassan Imam
  • 21,956
  • 5
  • 41
  • 51
Joe
  • 21
  • 3
  • inline style will always takes precedence over the classNames as they have more specificity. – Shyam Aug 28 '21 at 13:12
  • @Shyam I thought hover is like an event that should temporarily take priority? – Joe Aug 28 '21 at 13:13
  • Could the gray and black be set through classes rather than inline styles? – A Haworth Aug 28 '21 at 13:26
  • you can dynamically append the classes based on some condition. https://stackoverflow.com/questions/36209432/how-to-dynamically-add-a-class-to-manual-class-names – Shyam Aug 28 '21 at 13:28

0 Answers0