score:4
so i eventually fixed this using a <style>
tag with dangerouslysetinnerhtml
in a custom _document.js
. all together it should look like this:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" as="style" />
<style dangerouslysetinnerhtml={ {
__html: `</style>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap"
media="print"
onload="this.media='all';"
/>
<style>`
} }></style>
<noscript>
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" />
</noscript>
which generates the following output:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" as="style"/>
<style></style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap" media="print" onload="this.media='all';" />
<style></style>
<noscript><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=inconsolata:wght@400;600&family=karla:wght@700&display=swap"/></noscript>
not pretty, but better than having a <div>
inside the <head>
(which is not interpreted correctly by all browsers).
there's an open rfc to create a rawhtml
component or extend fragment
to accept dangerouslysetinnerhtml
so that something like this is possible without hacks, but it's been more than a year since it was created.
also, there's quite a long discussion about this as well with a few different solutions (hacks) that seem to work.
you can see the solution working here: https://andorratechvalley.com/
Source: stackoverflow.com
Related Query
- Next.js - How to add a <link> tag inside the <head> with literal onload attribute string value?
- How to test a component with the <Router> tag inside of it?
- How to add Link from react router dom to the submit button with the default Submit validation
- How to add html i tag with next and previous button in react-pagination package
- How to link to Routes inside the component rendered by another Route with React Router
- How do I append a string containing a style tag as-is to the document head with vanilla js?
- How to add 'a' link tag with hyperlink in Reactjs app
- How to link react with redux to add and remove selected movies to the array by clicking on the heart to display them on the favoŠ³ites page
- How to pass function as prop in react routerv5 with the Link tag
- how to add only attribute on tag inside map javascript
- Add a class to the HTML <body> tag with React?
- How to upgrade a React project built with create-react-app to the next create-react-app version?
- How to add comment inside the return statement in render function?
- How can I change the color of a Link in React with Material-UI?
- How to add a button inside a cell in the DevExtreme React Grid?
- Avoid rerender in React caused by objects literal : how to do with variables in the object?
- How to use nested routes to add content to a page without removing the content of the previous route with react-router-v4?
- How to add lang attribute to html tag in Next.js?
- How to add dynamic code inside of a React Router Link component
- How does s% reference the title attribute inside the Helmet component?
- React Native: How to add script tag in the component
- Link tag inside BrowserRouter changes only the URL, but doesn't render the component
- How can add all files in public directory to the build directory with parcel-bundler
- How to add a html element next to the cursor in contentEditable div. React Js
- How we can make a div placed inside a link tag to be non-navigated
- How can I add style to the body element with JSS?
- ReactStrap modal close icon is not getting show in the modal and How to use the header with some another tag
- How do i use/print the value inside a generic attribute in TestCafe
- How to change the specfic component inside an li tag (reactjs);
- Material UI Stepper using custom icon deletes the step number. how to add the number or random text back with a custom icon?
More Query from same tag
- Adding a className on scroll?
- How to extract the id from the object payload?
- How can I test that a component has an attribute?
- running react and node in a single docker file without docker-compose.yml file
- Is there a way to upload a file to Node.js using React and Observables (rx.js)?
- FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory node.js
- React.js check if component exists
- CocoaPods could not find compatible versions for pod "lottie-ios"
- Question about react class component setState
- Get object property value from array of objects
- How to animate multiple framer-motion elements once in viewport
- CORS Error on uploading image/video file to google cloud in react js
- NextJS: Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')
- Refused to load the script 'https://apis.google.com/js/platform.js' because it violates the following Content Security Policy
- Gatsby renderRichText with Contentful doesn't render hyperlink
- Is it possible to use Ant Design straight into the browser in combination with Reactjs without Webpack?
- Delete state objects in react
- How to add commit hash into reactjs vite.config.js
- Pass dropdown value from function to React.useEffect() on selection
- My own external js codes work once in react-router
- Webpack - Build css not applied
- Remove Unused JS/CSS bundles Code Splitting Webpack
- typeerror: cannot read property of undefined javascript - empty JSON object from fetch despite postman showing object from API
- Parent with height: self doesn't have children's height
- React Router , protect static images
- Can successfully open modal when I need to but cannot close it
- Is there a way to pass a className to a component in react-markdown?
- How to assert and test a ReactJS / Fluxible Component's state?
- how to access images of movieDB API using React and Axios
- How can I refresh datatable when I delete row from datatable with ReactJS without using Redux or Context?