Is there a reason for useRef hook to not get updated on time, im using it for setting state and change css property with emotionjs
Keep in mind that changing the value of useRef does not initiate a re-render of the state. If you want a re-render, use useState.
https://beta.reactjs.org/apis/react/useState
Please share your code for more specific responses. You can still edit your original post.
Related
i need to get this component opened by default without loosing the open closed default behavior.
What is interesting is that they to this in the example of the documentation, but when you copy paste the code under the "code" tab, it is closed by default.
https://headlessui.com/react/menu
Thanks
I managed to get the component opened by default by adding static as stated in the doc + adding show={true} on the transition component but with this solution, i cant close it.
I was expecting some prop like default={'open'} but i can't find it in the documentation
I am using Nextjs with Material UI and Material UI CSS doesnt load properly on first page load like the picture
wrong look like this on first visit
correct one with correct style after a page transition
(there are alot of other instances for example elements like header with fixed position are not in their place etc ... )
but when I transition from one page to the other or even trigger a setState command everything goes to its place and CSS gets applied. I think this is because of class name mismatch between server and client I have applied the _app and _document from this link and the issue still persists.
so there is only one option for me and that is to add a Twitter or Instagram like first page load into the site so if this is the first visit it gets showed to user then because of call to set some state everything shows properly. So how can I detect in nextjs if this is the first page visit from a user into the site and I dont want to use the context provider cause then I have to add the consumer to every page and the site has alot of pages
is there any workaround or solution for this problem I have been searching for an answer for weeks and I have asked the creators of Material UI and they said that with some upcoming upgrade it will get fixed but untill then what should I do ?
After so many days I noticed that in my _document.js file I have
import { ServerStyleSheets } from "#material-ui/styles";
I changed that to
import { ServerStyleSheets } from "#material-ui/core/styles";
and after that CSS got applied and I got rid of the flickering problems
I have custom css for my nav buttons. On pressing buttons the page ofcourse reloads and I can for a split second see the original btn colors. Worse if one of my buttons does a "target=_blank" then button that was selected prior to it remains on the original bootstrap colors..
Would appreciate insights how to fully override the css so I always get the custom colors
Regards
M.R.
Try to use grunt to generate inline css and that would solve the problem.
If you are unable to configure the grunt then add button styles in inline.
Based on your site link. Your request takes too long so the css is not there. Just have that css load when your page does. There is no reason to keep a 1kb file to be loaded on request, or any size at all. What is your reason to have this approach?
I tried to add one more attribute to clarity modal css in clarity-ui.min.css but the changes are not reflecting.
Without any details about what you've done, its hard to understand what is going on. However, you should not directly edit clr-ui.min.css and instead write your own CSS that is included afterwards and overrides any values you need.
The problem is about how to maintain the content and state of an iframe in a component of Vue no matter the component is showing or hiding.
I tried two methods:
(1) using keep-alive together with vue-router
<keep-alive>
<router-view>
<Component></Component>
</router-view>
</keep-alive>
(2) take it as a sub component, using v-if to show and hide instead of vue-router
<Component v-if="$store.state.isShow"></Component>
both methods keeps the content of component but the iframe still refreshes every time, so is there any method to achieve just hiding and showing the iframe?
A similar question is Thomas question, he also uses the vue-router method and does not work out, I agree with the opnion of Thomas that Vue just keeps the content of component but not of iframe.
Thanks a lot!
If the sub component approach works for you:
<Component v-if="$store.state.isShow"></Component>
then a slight modification will keep the iframe from being refreshed on state changes:
<Component v-show="$store.state.isShow"></Component>
Note that this only works if the route remains unchanged.
If you actually need to use different routes, and if the only problem with refreshing the iframe is performance, you might be able to get away with loading the iframe contents via ajax and caching it in local storage.