What is the purpose of using createGlobalStyle instead of just importing a css file, when working with styled components?
I have read the docs, but i don't get it..
Related
I'm new to Next.js.
Although I declared css files in _app.tsx, some of styles defined in the css files are not working.
Some of styles use images imported from 'public/images' and this are not imported neither.
Please help me find out what is wrong with this. Do I have to change the folder structure?
The version of Next.js is "13.1.1".
Thanks in advance!!
I'm working on a project with below folder structures.
public
fonts
images
src
pages
styles
global.css
layout.css
My _app.tsx file looks like
import '#/styles/layout.css';
import '#/styles/common.css';
export default function App({ Component, pageProps }: AppProps) {
...
}
Rename your CSS file as layout.module.css. Use .module.css extension in your CSS files. Refer nextjs documentation for further references.
am also new to Nextjs , turned out you can't use regular CSS files, you should use CSS modules.
you need to rename each CSS file 'except global' to end with .module.css instead of .css
then you need to import the file in the component you want to style : import styles from 'style/file.module.css'
to style an element create a class in the CSS file:
.paragraph{ color:green }
and then use it in the component:
<p className={styles.paragraph}>I am styled with CSS modules</p>
Ref!
there is a standard CSS framework called Tailwindcss you should try it
I'm building a website with gatsby and I have set up the gatsby scss plugin. Everything seemed to be working fine until I realized my styles from home.module.scss were also being applied to my navigation component that only imports navbar.module.scss.
I have a style for my buttons in each of these modules that looks like this...
button {
// different styles in the different modules
}
Both of these modules import a global scss file at the top like this...
#import '../styles/global.scss';
The react components only import their respective modules. In my main index component I import global styles like this import './global.scss'
Am I misunderstanding how scss modules work in React or is this is a bug?
from my understanding
In react importing SCSS or CSS in any component will be global.
So it will affect all other components as similar to the component where you imported the SCSS file.
use different class names
When I add new HTML code to my React app , the CSS styles from the App.css file aren't applying anymore , until I retype Import './App.css'" in the head.
Any solution please.
All our components in React act like modules and have their data (variables, functions) private to them. To access code or styles from other files we need import from other modules.
Our App.js is also one such component. Until you do import './App.css', the CSS will not be applied to App.js.
Problem solved , it was about bootstrap .
Import bootstrap/dist/css/bootstrap.min.css before App.css .
I was doing the opposite .
Using React and classnames to do styles. I get no errors but I get undefined when I console.log(styles.uiPad). I do get an object when I console.log(styles). My classnames import component also gets console.logged successfully but nothing happens. What am I doing wrong? Is this a webpack thing?
Here are my imports:
import styles from '../assets/stylesheets/base.scss'
import classNames from 'classnames'
This is my render:
<div className={classNames(styles.uiPad)}></div>
You are importing a Sass file. You need to compile Sass into CSS before importing it.
I use react-bootstrap, but I want to modify some of the elements, so I wrote my own custom.css. However it doesn't make any changes (only when I put !important, but the file is so large so it's not a good option).
import {MenuItem, Nav, Navbar, NavBrand, NavDropdown, NavItem} from "react-bootstrap";
import {LinkContainer, MenuItemLink} from "react-router-bootstrap";
import '../assets/css/custom.css';
This is what I did so far.
When are you importing the Bootstrap CSS? I have an app which successfully uses Bootstrap with some overrides, which does this at the top of its index.js:
require('bootstrap/dist/css/bootstrap.min.css')
require('./bootstrap-overrides.css')