I've got an app that is a part of a larger system. My app is distributed as a JS file, that is later embedded into HTML of another page. I don't have control over that HTML file.
I want to add a font from Google Fonts into my app. I have a link to a stylesheet that imports and declares the fonts.
I've tried using createGlobalStyle from styled components or a CSS file referenced inside the file with main React component, to no avail — the font doesn't seem to be loaded, possibly because #import declarations have to appear before other declarations, and my CSS is inlined into a random place in the document.
How do I insert them as before any other CSS?
The solution to my problem was to add <link rel="stylesheet" src="..." /> into the head using react-helmet.
<Helmet>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
</Helmet>
Related
I recently started using Material UI library for my react projects and i found it super useful until i noticed those <style> tags inside the <head> section. Whether i use makeStyles() or withStyles() i noticed that they add so many <style> tags inside the <head> and increase the size of the html file, the more styling you do the more <style> tags they add. My question is very simple- Wouldn't the browser take more time to download our html file? and since our styles are not in a separate CSS file there won't be any caching by the browser right? Is there any solution so that i could get rid of these too many <style> tags? or should i just follow my previous styling approach - 1 CSS file for each component which in the end gives me one main CSS file.
I am converting React client-side rendering to SSR using Next.js but unable to load bundled files in my main view file.
These are not working on my end.
<link rel="stylesheet" href="/js/bundles/server-side-components/out/_next/static/css/*.css" />
<link rel="preload" href="/js/bundles/server-side-components/out/_next/static/chunks/*.js" as="script" />
<link rel="preload" href="/js/bundles/server-side-components/out/_next/static/chunks/pages/*.js" as="script" />
Background:
I am using laravel and frontend React.js.
In laravel view (blade file). I have included react bundle file like this.
<script type="text/javascript" src="/js/bundles/SocialApp/dist/main.bundle.js?v=xxxx.xxx" async></script>
Everything is working fine.
For performance, I wanted to move some components to Server-Side Rendering with Next.js.
I have removed the specific routes from react and moved these components to Next.js directory Pages folder. For Exmaple, If I wanted to move /example route to SSR then, I have created a file with the same name (example.js) into pages directory of next.js and compiled the code.
If I start next.js server separately, like http://localhost:3000/example. Server-Side rendering working perfectly fine. but I don't want to start next.js server separately and wanted to include build files into my main directory like I am doing with react bundles.
How can I achieve my goal?
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme
Are Cards added to React-Bootstrap yet?
Or is there any other undocumented way of adding it?
What I am thinking of right now is -> className = 'bootstrap card class syntax', but I guess, it won't work because it won't recognise it.
Sort of found the answer, but it doesn't go by the name of card
You can use <Thumbnail>, it gives the same feel as that of a card.
Bootstrap classes can be used the same way in react like in any non-react project, even without the use of react-bootstrap. It can be imported as a CDN in your index.html file...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
... or it can also be saved locally and imported that way. Or you can configure webpack to import css files directly into your project.
You'd just have to make sure to use className= instead of class=, but otherwise, it works exactly the same way.
<div className="col-xs-12 well"></div>
react-bootstrap is an add-on that provides components that do the same thing. So, even if it's not in react-bootstrap yet, you can still use the functionality, but just as a straight css class.
Given the following scenario, how can I use React/Preact components in my project:
The main/header content is generated using Django (or static html) templates
I want to use React to generate the sidebar and footer components, depending on the page it is sitting on.
I think the following would work, but I don't know how to split or load the bundles according along the following lines:
Load React/React-dom bundle on every page
Load page specific bundles on demand, where needed
How can I bundle single components up using webpack for use in static html pages and display them where needed? How do I configure webpack for that?
Essentially you transpile React from a bunch of JS/JSX files into one JS script (using Babel), which is then loaded in your html document. So it'd be something like this:
<html>
<head>
// Usual head section stuff
</head>
<body>
<div id="header">
This is the Django site header
</div>
<div id="sidebar_root" />
<div>
Blah blah all the site's body content from Django
</div>
<div id="footer_root" />
<script src="react_sidebar.js" />
<script src="react_footer.js" />
</body>
</html>
And you'd have you React components (which would have a bunch of sub-components), one of which is rendered into "react_sidebar.js" and the other into "react_footer.js". So those components would be in React and the others would be Django.
So in order to load React bundle scripts on demand, you just need to include the script and the div which acts as its root.
P.S.
If you were always loading the sidebar and footer together (i.e. never just one or the other bur always both) you could combine them React DOM rendering into one script, so you'd only have to include one script in your html