Not displaying the output whenever trying on http://localhost:3000/
Not able to understand how to resolve this issue and print desired output
Expecting to print a black box on the browser since written in css code for "theme.colos.bg: #000"
The createGlobalStyle creates a component that injects/sets global CSS defaults but doesn't take and render any children. It's a standalone component that is rendered alongside your app code/JSX.
createGlobalStyle
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
... default CSS ...
`;
// later in your app
<React.Fragment>
<GlobalStyle />
... your app components here
</React.Fragment>
Related
I've got this problem in ReactJS where if I Set a background color of a Body element in one page component, the color is still there when I route to other component which is not using that particular CSS.
So for example I have a welcome component which import a welcome.css that styles the background color of the body element. Then when I route to other component by clicking Link in navigation to let say contact-us component, the background color is still there on contact-us even thou contact-us does not import the welcome.css.
But in the first place if I never visit the welcome, and directly visit the contact-us, on a fresh tab, the coloring is obviously not there.
Code example:
welcome.css
body {
background-image: linear-gradient(310deg, #1b2753, #836538);
background-repeat: no-repeat;
}
Welcome.js
import React from 'react';
import { Link } from "react-router-dom";
import './assets/css/style/welcome.css';
function Welcome() {
return (
<>
<H1>Welcome !</H1>
<Link to="/contact-us">Contact Us</Link>
</>
);
}
export default Welcome;
ContactUs.js
import React from 'react';
function ContactUs() {
return (
<>
<H1>Contact Us</H1>
</>
);
}
export default ContactUs;
In react, css stylesheets are global, so it will apply that css everywhere in the toold wherever that selector is used.
To avoid that use Css modules or give unique names to every selectors.
in this case, its better to use CSS Modules.
Example: Make your component specific css with <name>.module.css and import in all required components, then use import styles from './Button.module.css'; and use ${style.<class-name>}
I've just started playing with next js. so I want to use css as module and setup classname for nav, but in rendered DOM this classname doesn't exist. I can see generated styles by webpack in "head" tag, but I dont see classname on my nav tag.
import React from "react";
import styles from './NavigationContainer.module.scss';
type Props = {};
const NavigationContainer: React.FC<Props> = ({children}) => {
return <nav className={styles.mainNavigationContainer}>{children}</nav>
};
export default NavigationContainer;
In JS, we cannot use - as a variable name it is considered as a minus to do the math.
It is a good idea to rename the CSS selector to .mainNavigationContainer so that the Next Js can get the correct CSS styles.
The JS part will remain the same.
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css
I have a React project which has two pages and each page has its own css file.
Page1.jsx -> Page1.css
Page2.jsx -> Page2.css
Each css file is only included in its corresponding jsx file. Both css files share similar class names (example: column, image-place, etc.). The problem is that Page1 is affected by Page2's CSS file.
I am not expert in front-end technologies. Any help will be appreciated.
Are you using create-react-app?
If so, use css-modules instead https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
CSS Modules allows the scoping of CSS by automatically creating a
unique classname
//Page1.jsx
import React from 'react';
import styles from './page1.module.css'; // Import css modules stylesheet as styles
export const Page1 = () => {
return (
<div className={styles.column}>page1</div>
)
}
/* page1.module.scss */
.column {
color: red
}
//Page2.jsx
import React from 'react';
import styles from './page2.module.css'; // Import css modules stylesheet as styles
export const Page2 = () => {
return (
<div className={styles.column}>page2</div>
)
}
/* page2.module.scss */
.column {
color: green
}
If you want to combine them with normal or external css class (bootstrap, tailwind, etc), try this:
<div className={`${styles.column} overflow-auto`}>page1</div>
A possible way to avoid conflicts is to use Sass. You can set it up by typing in your react app folder terminal:
npm i sass --save-dev
Then transform all .css files to .scss. Add a unique class on the top level wrapper of each page, for example :
retrun (<div className = "pageOne">
<img src = "/myImage" className = "image-place"/>
</div>)
And finally your styles will look like this :
.pageOne {
.image-place {
width:200px
}
.column {
width:200px
}
}
This way, you would have one unique class at the top level wrapper, and as many as class that have the same name in them.
I get the following error when trying to render simple html into my footer:
_registerComponent(...): Target container is not a DOM e
lement.
My render() is written just like other working ones in the same document, as following:
ReactDOM.render(<Footer />, document.getElementById('app-footer'));
My footer.js from which i export the Footer class looks like this:
import React, { Component } from 'react';
class Footer extends Component{
render() {
return (
<div>
<h3>Testtext</h3>
</div>
);
}
}
export default Footer;
I have tried multiple solutions already given here but none seem to work for this seemingly easy problem. I tried putting a document.onload around it, but that did not work. I really hope someone can point out the flaw in this one.
I'm learning how to use css modules with react, below is a working example of a checkbox here's what it looks like (pure HTML + CSS fiddle) without react.
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'
export function Checkbox (props) {
return <div styleName="checkbox--container">
<input styleName="checkbox" type="checkbox" {...props}/>
<span styleName="checkbox--styled"></span>
</div>
}
export default CSSModules(Checkbox, styles)
This is great and all, but let's say my client comes back and wants me to change the checkbox color. Fine, seems easy enough? That fiddle above shows that there is a couple of hex-codes (#479ccf) for border and within the SVG background image. Ideally I'd be able to pass along a react prop that allows you to do something like this <Checkbox color="#666333"/> and blam! However I can't find any documentation / way to get information from the component to the CSS file.
What does this mean?
I know what the react community is going to say, that particular set of CSS isn't ideal. It can be written in javascript within the component and from there you can set the inline styles of the pieces of the checkbox to the prop color. I'm pretty sure this is possible. Is this necessary? I'd have to refactor the ::after code, question about that.
I started on making the SVG functions.
function SVGDash (color) {
return `data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2012%2012"%20enable-background%3D"new%200%200%2012%2012"><style%20type%3D"text%2Fcss">circle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D<%2Fstyle><path%20d%3D"M6%200"%2F><path%20d%3D"M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z"%2F><%2Fsvg>`
}
function SVGCheck (color) {
return `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E`
}
You could create a different class composing the class you want to change the color:
.checkbox--styled-red {
composes: checkbox--styled;
background-image: url("data:image .... FF0000 ....");
}
And set it in the component when you get the matching props.color:
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'
function getStyleNameForColor(color) {
colorToStyleName = {
red: 'checkbox--styled-red'
};
return colorToStyleName[color] || 'checkbox--styled';
}
export function Checkbox (props) {
return <div styleName="checkbox--container">
<input styleName="checkbox" type="checkbox" {...props}/>
<span styleName={getStyleNameForColor(props.color)}></span>
</div>
}
export default CSSModules(Checkbox, styles)
Better yet, use classnames instead of getStyleNameFor(color).