0

I have a component which is wrapped in a div with display: flex

Another component controls whether that other component is visible or not. The initial state is display: 'none' and on a certain condition it will be shown. I wouldn't want to show it again by setting it to display flex, because I prefer that the component itself will be responsible for that. I would like to do something like "unset the display: none and let the component decide how it will be shown".

const AddNewRowHoverArea = styled('div')({
  height: 16,
  cursor: 'pointer',
  display: 'flex',
  justifyContent: 'flex-end',
  '& > div': {
    display: 'none',
  },
  '&:hover div': {
    display: 'flex',
  },
});

Currently it's done with display: flex. In such case is my only option is to use visibility: hidden ?

sir-haver
  • 3,096
  • 7
  • 41
  • 85
  • You can use the `unset` value, for example, `display: unset` on that other component you talked about. Or go with `visibility: hidden`. But I don't really understand what's purpose of this, since it's going to be the value going to be overridden by the down the tree `display: flex` anyway. Please correct me if I misunderstood. – Abdulrahman Ali Sep 21 '22 at 09:18
  • Don't know reactjs, but could you do `&:not(:hover) > div : { display: 'none' }` – Alohci Sep 21 '22 at 10:18

2 Answers2

1

If I understood you question correctly ,You can undone display none like this:

$('#ur_element_id').css('display','block');
Saad Rehman
  • 79
  • 7
  • Actually you phrased the question much better than I, and I then found a thread discussing this: https://stackoverflow.com/questions/17630945/is-there-an-opposite-to-displaynone I'm not using jquery, thank you very much however – sir-haver Sep 21 '22 at 09:14
  • you can use its alternative in vanilla js like this: `document.getElementById("myDIV").style.display = "block";` – Saad Rehman Sep 21 '22 at 09:19
0

you can do this like display: initial or display: block

Abasaheb Gaware
  • 509
  • 4
  • 13