How can I override some default values from primereact e.g. the primary color?
I read that i have to override the values by adding the following code in the proviced override.scss
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
Unfortunately, my changes are not applied when working with e.g. a button-class (which is working with the primary color). I also read that the overrides must happen before the actual class is created.
How can I do that? Do I need to run a SCSS-command?
In my remember, You can override variables in overrides/_layout_variables.scss or overrides/_theme_variables.scss files. Also you may need to upgrade your version to the latest.
You can override variable for some more specific rule
e.g.
:root {
--primaryColor: green;
--primaryTextColor: #ffffff;
--panelContentBorder: 1px solid #c8c8c8;
}
.somePage {
--primaryColor: blue;
// So primaryColor will be blue for all rules in scope of .somePage
}
Well to overwrite SCSS/SASS/LESS variables in general you could do the following (The process does also work with less instead of .scss)
Create a new .scss file
Instead of directly including the frameworks (doesnt matter which one you use) .scss include your OWN created .scss file (step 1)
Import the framework's .scss file in your own, custom .scss file
Compile your own .scss file using e.g. node-sass
Example of your own .scss file
#import "node_modules/path_to_the_libaries_scss_file.scss";
// Overwrite colors like this:
$primary-color: #ff5b00;
I had built a website with React.js and webpack.
I want to use Google fonts in the webpage, so I put the link in the section.
Google Fonts
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
And set CSS
body{
font-family: 'Bungee Inline', cursive;
}
However, it does not work.
How can I solve this problem?
In some sort of main or first loading CSS file, just do:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');
You don't need to wrap in any sort of #font-face, etc. the response you get back from Google's API is ready to go and lets you use font families like normal.
Then in your main React app JavaScript, at the top put something like:
import './assets/css/fonts.css';
What I did actually was made an app.css that imported a fonts.css with a few font imports. Simply for organization (now I know where all my fonts are). The important thing to remember is that you import the fonts first.
Keep in mind that any component you import to your React app should be imported after the style import. Especially if those components also import their own styles. This way you can be sure of the ordering of styles. This is why it's best to import fonts at the top of your main file (don't forget to check your final bundled CSS file to double check if you're having trouble).
There's a few options you can pass the Google Font API to be more efficient when loading fonts, etc. See official documentation: Get Started with the Google Fonts API
Edit, note: If you are dealing with an "offline" application, then you may indeed need to download the fonts and load through Webpack.
Google fonts in React.js?
Open your stylesheet i.e, app.css, style.css (what name you have), it doesn't matter, just open stylesheet and paste this code
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
and don't forget to change URL of your font that you want, else working fine
and use this as :
body {
font-family: 'Josefin Sans', cursive;
}
If you are using Create React App environment simply add #import rule to index.css as such:
#import url('https://fonts.googleapis.com/css?family=Anton');
Import index.css in your main React app:
import './index.css'
React gives you a choice of Inline styling, CSS Modules or Styled Components in order to apply CSS:
font-family: 'Anton', sans-serif;
you should see this tutorial: https://scotch.io/#micwanyoike/how-to-add-fonts-to-a-react-project
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Titillium Web:300,400,700', 'sans-serif']
}
});
I just tried this method and I can say that it works very well ;)
Here are two different ways you can adds fonts to your react app.
Adding local fonts
Create a new folder called fonts in your src folder.
Download the google fonts locally and place them inside the fonts folder.
Open your index.css file and include the font by referencing the path.
#font-face {
font-family: 'Rajdhani';
src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}
Here I added a Rajdhani font.
Now, we can use our font in css classes like this.
.title{
font-family: Rajdhani, serif;
color: #0004;
}
Adding Google fonts
If you like to use google fonts (api) instead of local fonts, you can add it like this.
#import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;500&display=swap');
Similarly, you can also add it inside the index.html file using link tag.
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;500&display=swap" rel="stylesheet">
(originally posted at https://reactgo.com/add-fonts-to-react-app/)
In your CSS file, such as App.css in a create-react-app, add a fontface import. For example:
#fontface {
font-family: 'Bungee Inline', cursive;
src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}
Then simply add the font to the DOM element within the same css file.
body {
font-family: 'Bungee Inline', cursive;
}
Another option to all of the good answers here is the npm package react-google-font-loader, found here.
The usage is simple:
import GoogleFontLoader from 'react-google-font-loader';
// Somewhere in your React tree:
<GoogleFontLoader
fonts={[
{
font: 'Bungee Inline',
weights: [400],
},
]}
/>
Then you can just use the family name in your CSS:
body {
font-family: 'Bungee Inline', cursive;
}
Disclaimer: I'm the author of the react-google-font-loader package.
Had the same issue. Turns out I was using " instead of '.
use #import url('within single quotes'); like this
not #import url("within double quotes"); like this
I can see there are various different ways to include google fonts in react app. Let's explore the most preferred and optimum way.
#import vs link
The two options that google font provides are using link and #import. So now the question directs toward decision in between #import and link. There is already a Stack Overflow question regarding this comparison and here is a reference from the accepted answer
<link> is preferred in all cases over #import, because the latter
blocks parallel downloads, meaning that the browser will wait for the
imported file to finish downloading before it starts downloading the
rest of the content.
So, it's most preferable to use the link tag that google font provides
How to use link and why in a react app?
I have seen few answers giving this method as a solution but I want to make it more clear why it is most preferable.
After using create-react-app to initialize the project, you can see a comment in the index.html file inside the public folder as below.
You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the tag.
So you can simply include the link tag that google font provides in the head section of the above file.
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
Then you can use it in the CSS file and import in JSX
font-family: 'Bungee Inline', cursive;
In case someone needs it, you can use #fontsource. They have all of the Google Fonts and seems easier than most of the solutions here.
If anyone looking for a solution with (.less) try below. Open your main or common less file and use like below.
#import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
body{
font-family: "Open Sans", sans-serif;
}
Edit index.css
#import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
margin: 0;
font-family: "Poppins", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I added the #import and the #font-face in my css file and it worked.
Add link tag in index.html on root directory inside public folder.
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>
then use it in any css file.
Create a new folder fonts in your src folder.
Download the google fonts locally and place them inside the fonts folder.
Open your index.css file and include the font by referencing the path.
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(./fonts/Roboto/Roboto-Regular.ttf) format('truetype');
}
now you can use font link this
.firstname{
font-family: Roboto, serif;
color: #0004;
}
It could be the self-closing tag of link at the end, try:
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>
and in your main.css file try:
body,div {
font-family: 'Bungee Inline', cursive;
}
In some cases your font resource maybe somewhere in your project directory.
So you can load it like this using SCSS
$list: (
"Black",
"BlackItalic",
"Bold",
"BoldItalic",
"Italic",
"Light",
"LightItalic",
"Medium",
"MediumItalic",
"Regular",
"Thin",
"ThinItalic"
);
#mixin setRobotoFonts {
#each $var in $list {
#font-face {
font-family: "Roboto-#{$var}";
src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
}
}
}
#include setRobotoFonts();
How can I style my React component using Sass and CSS modules based on the existence of a GLOBAL parent selector (in this case isOpen)?
Rendered HTML:
<div class="isOpen">
<div class="MyContainer__MyStyle___u9dTa">
My react component
</div>
</div>
My Sass file:
.MyStyle
margin-left: 100px
color: black
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.MyStyle
:global(.isOpen) &
margin-left: 0
color: red
The code above gives error: Property "global" must be followed by a ':'
Though it's a little late for me to answer, I think I found the answer and I'll post it for those who may encounter this problem in the future.
The problem is in Sass you have to escape the :global keyword with \:global in order to make CSS module works as you expected.
The discussion can be found at https://github.com/webpack-contrib/sass-loader/issues/448.
It looks like you have a few issues here.
"MyContainer__MyStyle___u9dTa" is one big class name. You cannot reference one part by using the period syntax. however you can reference a partial class like this..
*[class=*"MyStyle"]{}
It also looks like you are using LESS syntax instead of sass. here is how i would write the code with sass and partial class references
*[class=*"MyStyle"]{
margin-left: 100px;
color: black;
}
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.isOpen{
*[class=*"MyStyle"]{
margin-left: 0
color: red
}
}
good luck. and its worth noting that you can use vanilla CSS within a sass file if that is easier for you. Here are some resources for CSS and SASS
http://www.w3schools.com/css/css_syntax.asp
http://sass-lang.com/documentation/
I'm using a "mobile first" approach on my site, and I'm utilizing SCSS.
I have 3 SCSS stylesheets:
base.scss (served to all)
medium.scss (>= 768px window)
large.scss (>= 1024px window)
They are served like this:
<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />
In other words, large.scss has no knowledge of the css in base.scss, yet I need to extend a class that resides in base.css, when in large.scss.
How can I do this?
I tried separating the elements I need to extend, such as the buttons, into a separate stylesheet, and then use #import 'buttons.scss'; in medium.scss, but then all the css in buttons.scss will be rendered in that sheet as well.
Are there any way to make expose classes in base.scss to the SASS "rendering engine" when compiling the css so that they can be used in medium.scss?
I had similar issue recently. My solution: mixins.
_mixins.scss
#mixin someSpacing($base: 5px;){
padding: $base;
margin: $base;
}
Remember to use underscore as prefix, sass wont compile those files. So now you can simply import _mixins.scss to your files. Additionally you can extend your mixin with parameters to give you more flexibility.
e.g.
base.scss
#import '_mixins.scss';
.classA {
#include someSpacing(3px);
}
large.scss
#import '_mixins.scss';
.anotherClass {
#include someSpacing(10px);
}
more details in sass reference:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
I needed this as well once. I asked Chris Eppstein today and he said:
extend is per output file
So yeah. #include is your only hope.
The correct approach to your task is to store all the extendable selectors in partials and import those partials into your output files.
project/partials/_extendables.sass
.foo
color: red
%bar
width: 50px
project/base.sass
#import partials/extendables
.baz
#extend .foo
project/medium.sass
#import partials/extendables
.quux
#extend %bar
Also, the approach you're using for organizing the responsiveness i heavily outdated. Unless you're forced to support some old rusty version of IE, you should use the modern approach:
A single output file.
Code organized into many small partials, grouped by page components (menu, news list, news item, etc) and by function (sticky footer technique, typography), rather than grouping it by media queries or by where elements appear on the page (e. g. all header code, all sidebar code).
Media queries should be applied granularly, in-place, using the Sass media query bubbling feature:
project/partials/components/_menu.sass
.menu
#media (max-width: 600px)
// Mobile styles for menu container
#media (min-width: 601px)
// Desktop styles for menu container
.menu-item
#media (max-width: 600px)
// Mobile styles for menu items
#media (min-width: 601px)
// Desktop styles for menu items