I'm trying to add the Normalize.css from node_modules but it doesn't work.
I have tried everything, from a custom configuration for webpack (I'm using version 5 for my React project), to importing it into the preview.js and preview-head.html, but I can't get it to work, Storybook still keeps putting me the browser styles and it's very frustrating, because in my React project I want to use a css normalizer.
Can someone give me an example of how it would be done? Since what I have found in the documentation and on the internet has not helped me or I have not known how to do it.
Thanks
You can try put the style tag in preview-head.html
Like this:
<style>
/* copy-paste normalize code hire */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
...
</style>
The storybook docs mention importing your css in preview.js
https://storybook.js.org/docs/react/configure/styling-and-css#importing-css-files
To use your CSS in all stories, you import it in .storybook/preview.js
// ./storybook/preview.js
import 'normalize.css';
Related
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
How can I use reactstrap when CSS module is enable? it seem reactstrap is not working properly. I use to call css by className={classes.mycss} but then I follow instruction here https://reactstrap.github.io/ and still it didnt work. Also I imported the bootstrap css in my index.js. Any idea how to fix this?
index.js
import 'bootstrap/dist/css/bootstrap.css';
myComponent
import { Button } from 'reactstrap';
There are certain problems with this approach:
CSS Modules localises the classnames to the module it is imported in, so if you import boostrap css, you will have to repeat that in every module.
CSS Modules requires classnames that are in camel case, which the bootstrap version is not.
Bootstrap styles are not written to be localised to a language. They are often meant to be shared.
Even if we use packages like Bootstrap CSS Modules, Reactstrap depends on the global classnames and will not work.
The way to the solve this problem might be to add bootstrap as a global stylesheet file and use classNames instead of CSS Modules specific styleName.
You can do this by:
Adding a link tag to index.html file.
You can find the discussion here
Hopefully a simple question with a simple answer, but how exactly do you use custom CSS to style react-date components? The docs on Github are about as clear as mud to me when it comes to CSS and seems to push users to use the theme method...which seems like a perfect way to make my project even more messy and confusing. I understand that I have to import react-dates/initialize and react-dates/lib/css/_datepicker.css, but importing my own CSS does not seem to affect the styling. I am using the default create-react-app setup for my application.
First you will need to include the libraries CSS and then include your custom CSS to override the libraries CSS.
require("libraries/style.css"); // Make sure to include this before your custom css
require("custom/style.css");
In your custom style.css file, you will need to override the styling rules from style.css like so.
.library-css-rule {
color: #000;
}
I am using Semantic UI lib for react
https://react.semantic-ui.com/introduction.
and create-react-app boilerplate
https://github.com/facebook/create-react-app.
My app requires RTL support especially for the Step component.
while researching for a solution i found that semantic ui have a config file semantic.json where i can define RTL but i can't warp the whole thing together.
does anyone have any recommendation or best practice for that?
you can use this
.ui * {
direction: rtl;
text-align: right;
}
The RTL support is a function of the semantic-ui CSS styles and should not have anything to do with semantic-ui-react. If you compile your own styles using the build tools in semantic-ui then use those styles in your project, they will work.
If you don't want to compile your own RTL styles, I believe this CDN is hosting a compiled RTL version of the CSS:
http://rtlcss.com/cdn/css-frameworks/semantic-ui/
If you want to use semantic-ui in reactjs in RTL language such (Persian/Arabic), you can follow below steps.
With cdn
First install semantic-ui for reactjs:
npm i semantic-ui-react
Then install semantic-ui css:
npm i semantic-ui-css
Now include semantic-ui rtl in index.html (just css)
Semantic UI RTL
<link
rel="stylesheet"
href="https://cdn.rtlcss.com/semantic-ui/2.4.1/semantic.rtl.min.css"
integrity="sha384-yXUIpeQfH3cuk6u6Mwu8uyJXB2R3UOLvcha1343UCMA2TA7lQ14BFmrudI6LAP8A"
crossorigin="anonymous">
Without cdn (Recommended)
If you don't want use cdn, just download css file go to this path:
node_modules/semanti-ui-css/
Put this css here, where semantic.css is, then include this:
import 'semantic-ui-css/semantic.rtl.min.css';
This method tested and already work fine, if anyone had issue, feel free to comment and I'll respond.
I'm trying to find a solution to this problem:
I'm using a template with different css includes based on page, ex:
Login uses login.css
Home uses home.css
If I load both css the login page is broken, because styles are overwritten by home.css
So I need to load or require login.css if the route or the component is Login and the other one when is Home.
If I load both webpack builds a global css with both files, and everything is broken...
I tried to require the css in componentDidMount, but I think that is not the way :)
Thanks in advance
It sounds like both these styles are quite specific to the pages, so why not simply namespace them?
Within your templates, have a .login/.home class, and use this as the namespace within the css. If you're using sass, this is as simple as wrapping all the sass in the class. Otherwise, you can go through and add the class to the beginning of all the elements/clases.
First of all, you shouldn't have any problems if you use different css classes for your views and just style the elements based on those classes.
The best way to load css in react is to do it by components, if you got a component login.jsx, in your styles folder (or whatever folder you're using to hold your styles) create a sass partial _login.scss and add the css selectors and styles for that given component, and do that for every component in your react application.
Then you just include those partials into a main.scss file and that's the file you want to load into your react app.
Here's an example of a main.scss file with some sass partials.
#import 'base/variables';
#import 'base/defaults';
#import 'components/login';
#import 'components/home';
That's a good and clean way to work with styles in react, of course you will need to configure your webpack in order to get sass to work in your application.
Take a look at this and this for more info.
This is a more generic approach to combine CSS files, without depending on technologies like SASS or reactjs.
I assume, if you combine the two CSS files, you are using Grunt or similar tool, to automate that task. So automatically updating the CSS files should be OK for you, even though they are from an external source and you want to use updated versions without making manual changes.
I also assume, you are using classes to style your pages, so there are no tag based styles in your CSS. Because you cannot rename the tags in the CSS file without braking it or make larger changes to your code.
If my assumptions are true, you could use something like grunt-css-prefix. It can add prefixes to your CSS classes for the login page, like in this snippet.
Original CSS file content:
.foo,
.bar,
h1 {
display: none;
}
CSS file content after running the Grunt script:
.login-foo,
.login-bar,
h1 {
display: none;
}
Just use the login-foo like class names in your Login-HTML and you are good to go.
For more details on how to use grunt-css-prefix, please have a look at https://www.npmjs.com/package/grunt-css-prefix.