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 ?

2
  • 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
    Commented Sep 21, 2022 at 9:18
  • Don't know reactjs, but could you do &:not(:hover) > div : { display: 'none' }
    – Alohci
    Commented Sep 21, 2022 at 10:18

2 Answers 2

Reset to default
1

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

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.