Skip to main content

Styled Components - along with Material-UI

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions:

https://material-ui.com/guides/interoperability/



https://emotion.sh/docs/styled

Comments

Popular posts from this blog

fs.writeFile - permission issue on GCP (Google Cloud Run)

error on this: fs . writeFile ( fileName , pdfBytes , err => { if ( err ) { console . log ( err . message ) reject ( err . message ) } else resolve ( fileName ) }) #1 It looks like when deployed into Cloud Run it also requires the extra permission "Service Account Token Creator" to run  getSignedUrl . Locally for some reason this role is not required. #2 Only the directory  /tmp  is writable in Cloud Run. So, change the default write location to write into this directory. However, you have to be aware of 2 things: Cloud Run is stateless, that means when a new instance is created, the container start from scratch, with an empty  /tmp  directory /tmp  directory is an in-memory file system. The maximum allowed memory on Cloud Run is 2Gb, your app memory footprint included. In addition of your file and Airflow, not sure that you will have a lot of space. A final remark. Cloud Run is active only when it...

A component is changing an uncontrolled input of type text to be controlled error in ReactJS - Formik

 https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro default value can't be undefined  case 'listingBrokerOfficeName' : value = ( listingBroker || {}). officeName break change to: case 'listingBrokerOfficeName' : value = ( listingBroker || {}). officeName || '' break

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application - useIsMountedRef

  https://juliangaramendy.dev/blog/use-promise-subscription React.useEffect(() => { let isSubscribed = true; fetchBananas() .then(bananas => (isSubscribed ? setBananas(bananas) : null)) .catch(error => (isSubscribed ? setError(error.toString()) : null)); return () => (isSubscribed = false); }, []); https://juliangaramendy.dev/blog/managing-remote-data-with-swr https://betterprogramming.pub/why-you-should-be-separating-your-server-cache-from-your-ui-state-1585a9ae8336 https://www.youtube.com/watch?v=oWVW8IqpQ-A How severe is this warning? Since this is a warning, it is not a showstopper. But bear in mind that your asynchronous code could potentially cause performance issues or memory leaks. How can I prevent the issue? The issue represents a state management design issue in your application. There are many ways to solve state management design issues. Here are a few: Develop an “isMounted” workaround to the problem (not recommended) Move your s...